如何让垂直排列的下拉菜单子列表

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/

我在上面添加注释来说明几件事情我固定。