디스플레이가 보이지 않는 이유는 무엇입니까?

Question

하위 메뉴가있는 메뉴를 만들려고합니다. 내 HTML을 쓴 것 같습니다 : 나는 스타일 시트가 연결이 있고, 그것은처럼 보이는

<nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a> 
      <ul> 
       <li><a href="#">dropdown 1</a></li> 
       <li><a href="#">dropdown 2</a></li> 
       <li><a href="#">submenu </a> 
        <ul> 
         <li><a href="#">submenu 1</a></li> 
         <li><a href="#">submenu 2</a></li> 
         <li><a href="#">submenu 3</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
</nav> 

:리스트가 블록으로 표시됩니다 어떤 이유로

nav ul { 
    display:inline-block; 
    position:relative; 
    list-style:none; 
} 
nav ul ul { 
    display:none; 
} 
nav ul li:hover > ul { 
    display:block; 
} 

. 나는 float:left을 시도했지만 별 차이가 없었다.

Answer 1

당신은 리튬 요소 display:inline-block을 넣어해야합니다 :

nav li { 
display:inline-block; 
} 

확인 여기에 예 : 블록으로 표시되는 목록 http://jsfiddle.net/9y1uzqye/1/

Answer 2

개별 목록 항목을 목록 표시가 아닌 블록 표시로 사용해야합니다.