为什么UL列表被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。

使用min-height代替height。

Answer 2

第二层li继承顶级li的CSS

你需要来CSS

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

这看起来像是在制作一个菜单 - 像这样（http://www.devinrolsen.com/pure-css-vertical-menu/）可以建议你提供更好的代码，但填充和边距是公认的技术实现你显然想要什么