메뉴 드롭 다운 메뉴를 수직으로 정렬하는 방법

Question

첫 번째 탐색 링크 위로 마우스를 가져 가면 하위 목록이 서로 아래로 수직으로 정렬되지 않고 서로 옆에 있습니다. 마우스를 올리면 내비게이션 디스플레이와 동일한 너비가되도록하려면 어떻게해야합니까?

내 HTML :

<nav> 
     <ul> 
      <li> 
      <a href="fashion.html">fashion</a> 
       <ul> 
        <li><a href="streetstyle.html">street style</a></li> 
        <li><a href="celebstyle.html">celebrity style</a></li> 
       </ul> 
      </li> 
      <li><a href="beauty.html">beauty</a></li> 
      <li><a href="music.html">music</a></li> 
      <li><a href="entertainment.html">entertainment</a></li> 
     </ul> 
    </nav> 

내 CSS :

nav { 
font-family: 'Josefin Sans', sans-serif; 

} 

nav li { 
display:block; 
width: 25%; 
background-color: #000; 
position:relative; 
float:left; 
list-style:none; 
} 

nav a { 
text-decoration: none; 
font-size: 17px; 
color: white; 
padding:6pt 0; 
text-align: center; 
display: block; 
border-bottom: 3px white solid; 
text-transform:uppercase; 

} 
nav a:hover{ 
background: #d04576; 
border-bottom: 3px white solid; 
-webkit-transition: all 0.5s; 
-moz-transition: all 0.5s; 
-ms-transition: all 0.5s; 
-o-transition: all 0.5s; 
transition: all 0.5s; 

} 

nav ul li ul { 
display:none; 
width:100%; 
} 

nav li:hover ul { 
display: block; 
width:100%; 
} 

Answer 1

당신은 당신의 li 왼쪽을 모두 떠있다.

nav li li을 float: none;으로 설정하는 것이 좋습니다. 당신의 CSS이 추가보십시오 :

nav li li{ 
    float: none; 
} 

편집 : 여기가 jsFiddle입니다 : http://jsfiddle.net/TscH5/3/

은 내가 고정 몇 가지를 설명하기 위해 상단에 주석을 추가했다.