CSS 높이 속성으로 인해 UL 목록이 엉망인 이유는 무엇입니까?

Question

나는 이것에 당황 스럽다. 중첩 목록에서 LI 요소의 높이를 목록으로 설정하면 항목이 겹칩니다. 이것에 대한 설명은 무엇이며, 중첩 효과없이 높이를 적용하는 적절한 방법은 무엇입니까? (I 높이가 아닌 패딩이나 마진을합니다.)

.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

두 번째 계층 리는 상위 계층 리에서 CSS를 상속

당신은

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

이 같은 CSS 올 필요 당신이 메뉴를 만드는 것처럼 보입니다. - Tuts for this (http://www.devinrolsen.com/pure-css-vertical-menu/)는 더 나은 코드를 조언 해줄 수 있지만 Padding과 margin은 분명히 원하는 것을 성취 할 수있는 기술입니다