なぜCSSの高さ属性によってうまくいかないのですか？

Question

私はこれに困惑しています。ネストされたリストでは、LI要素の高さをリストに設定すると、項目が重なります。これについての説明は何ですか、重なり効果なしで高さを適用する正しい方法は何ですか？ （私は高さではなく、パディングやマージンたい。）

.aaa {background:#ccf;} 
.bbb {background:#fcc;} 
.bbb li {height:25px;} 

<ul class="aaa"> 
    <li>one one one</li> 
    <li>two, too 
    <ul> 
     <li>alpha</li> 
     <li>beta</li> 
     <li>gamma</li> 
    </ul> 
    </li> 
    <li>three</li> 
    <li>here comes four</li> 
</ul> 
<ul class="bbb"> 
    <li>one one one</li> 
    <li>two, too 
    <ul> 
     <li>alpha</li> 
     <li>beta</li> 
     <li>gamma</li> 
    </ul> 
    </li> 
    <li>three</li> 
    <li>here comes four</li> 
</ul> 

Answer 1

<li>two, too 
    <ul> <-- this list is part of your LI 
     <li>alpha</li> 
     <li>beta</li> 
     <li>gamma</li> 
    </ul> 
    </li> 

リストにリストがネストされているため、内側のリストは25pxより大きいためオーバーフローします。

heightの代わりにmin-heightを使用してください。

Answer 2

二層のLiはあなたが

ul li ul li {/*style to hit the bottom tier*/} 

このようにCSSを来る必要がトップティアリー

からCSSを継承していますあなたがメニューを作っているように見える - これのようなTuts（http://www.devinrolsen.com/pure-css-vertical-menu/）はあなたに良いコードを教えてくれるかもしれないが、パディングとマージンは明らかに望むもの