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/

我在顶部添加了评论来解释我修复的一些事情。

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

1 个答案: