CSS가있는 2 줄 메뉴

Question

구현하기 쉽지만 이름을 지정하기가 어렵습니다.

<ul class='menu'> 
    <li> 
    <a>item1</a> 
    <ul class='submenu'> ... </ul> 
    <li> 
    <li><a>item2</a></li> 
</ul> 

2 개 수평 라인 : :이 레이아웃을 표시하기 위해 고군분투

ul.menu 
{ 
    position: relative; 
    height: 20px; 
} 
ul.menu li { 
    display: inline; 
} 
ul.submenu { 
    top: 20px; 
    left: 0px; 
    position: absolute; 
} 

방법이 있나요 : 첫 번째 줄은 CSS를

ul.submenu ul.menu과 두 번째 줄입니다 위치없이 그것을하기 : 절대, 그래서 메뉴 컨테이너가 문서의 흐름에있다 (아무 격차가 부 메뉴가 존재하지 않습니다)?

Answer 1

나는 이것에 대한 jsFiddle을 설정했습니다.

문제를 제대로 이해하면 서브 메뉴가 문서 흐름에 남아 있으므로 하위 메뉴가 없을 때 페이지가 조정되는 두 줄 메뉴가 필요합니다.

catch는 다음과 같습니다. position: absolute이 없으면 부모 <li> 요소가 하위 메뉴 <ul> 요소를 포함하도록 확장됩니다. 이렇게하면 상위 메뉴 항목이 하위 메뉴 요소의 너비에 따라 홀수 간격으로 남습니다.

이것이 문제가되지 않는다면 위의 jsFiddle이 문제를 해결해야합니다. 그것이 문제라면 조금 더해야 할 일이 있습니다. 아직 해결책이 없습니다.

Answer 2

my answer here을 확인하십시오. 원하는 내용과 비슷하다고 생각합니다.

편집 : 죄송합니다 CSS를 단지 생각을 놓친, 여기에 내가 무엇을 할 것이라고입니다 :

.submenu{ display:none;} 
li:hover .submenu{ display: block;} 

Answer 3

다음 업데이트 된 CSS를 사용하십시오. 그것은 완벽하게 작동합니다.

ul.menu { 
    height: 20px; 
} 
ul.menu li { 
    display: inline; 
    float:left; 
} 
ul.submenu { 
    display:block; 
    margin:0px; 
    padding:0px; 
}