Question

我正在尝试为响应式网站制作导航菜单。我来到了一个点，我的主菜单流畅，但不知道如何从中获取下拉菜单。这是我的HTML代码：

<body>
<div id="nav">
<ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="">Exercises</a></li>
        <ul>
            <li><a href="exercise.html">Yoga</a></li>
            <li><a href="">Pilates</a></li>
            <li><a href="">Aerobics</a></li>
        </ul>
    <li><a href="">Clothes</a></li>
    <li><a href="">Recipe</a></li>
    <li><a href="">Contact</a></li>
</ul>
</div><!-- ends nav -->

</body>

这是我的CSS：

#nav {
display: table;
table-layout: fixed;
width: 100%;
}

#nav ul {
display: table-row;
margin: 0;
padding: 0;
}

#nav ul li {
list-style: none;
display: table-cell;
text-align: center;

}

#nav ul li a {
display: block;
}

我尝试将这些代码行添加到我的CSS中，但也不起作用：

#nav ul li:hover ul {
    display: block;
}

请帮帮我。

由于

Answer 1

问题中的列表结构不正确

<li><a href="">Exercises</a></li>
        <ul>
            <li><a href="exercise.html">Yoga</a></li>
            <li><a href="">Pilates</a></li>
            <li><a href="">Aerobics</a></li>
        </ul>

应该是

    <li><a href="">Exercises</a></li>
        <ul>
            <li><a href="exercise.html">Yoga</a></li>
            <li><a href="">Pilates</a></li>
            <li><a href="">Aerobics</a></li>
        </ul>
    </li>

子<ul>包含在父<li>节点中。

其次，添加以下代码以使其下拉：

#nav  li {position:relative;}
#nav  li ul{display:none;position:absolute;left:0;top:100%;}

然后添加更多CSS代码以使其更美观。

带有下拉菜单的流体导航栏

1 个答案: