Почему списки UL испорчены атрибутом CSS height?

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 наследует CSS от верхнего уровня li

Вам нужен CSS как

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

Похоже, что вы создаете меню - вот так (http://www.devinrolsen.com/pure-css-vertical-menu/) может посоветовать вам лучший код, но заполнение и поле - это признанные методы для достижения того, чего вы, очевидно, хотите)