Question

我正在尝试用css和html创建一个基本的下拉菜单。然而，当我将鼠标悬停在必须下降的li上时，我的整个菜单都会随之下降。

这是我的代码：

<nav class="icons">
    <ul>
        <li><a href="#about" class="smoothScroll">Home</a></li>
        <li><a href="#page1" class="smoothScroll">About</a></li>
        <li><a href="#page2" class="smoothScroll">Portfolio</a></li>
        <li><a href="#page3" class="smoothScroll">Contact</a></li>
        <li><a href="#">Account</a>
    <ul id="login">
        <li><a href="changepassword.php">Change password</a></li>
        <li><a href="update.php">Update details</a></li>
        <li><a href="logout.php">Logout</a></li>
    </ul>
   </li>
   </ul>
</nav>

和CSS

nav {
height: 70px;
width: 100%;
position: fixed;
top: 0;
left: 0;
}

nav ul ul {
    display: none;
}

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

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-left: 5%;
}
ul li {
    display: inline-block;
    width: 15%;
    text-align: center;
    line-height: 70px;
}
ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 2em;
    display: block;
}
ul li a:hover {
    border-bottom: solid black 1px;
}

ul#login{
    margin: 0;
    padding: 0;
    list-style: none;
}

ul#login li {
    display: block;
    width: 30%;
    text-align: center;
    line-height: 70px;
}
ul#login li a {
    text-decoration: none;
    color: #fff;
    font-size: 2em;
    display: block;
}

ul#login li ul li{
    width: 20%;
}

ul#login li ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 0.7em;
    display: block;
}
ul#login li a:hover {
    border-bottom: solid black 1px;
}

我知道这样的基本菜单有很多CSS，但我不知道如何使它更紧凑。有人可以通过下拉菜单告诉我我的错误吗？

Answer 1

添加此css

ul li{
    position:relative;
}

#login{
    position:absolute;
    top:71px;
    left:0;
}

<强> FIDDLE

下拉菜单：整个菜单关闭

1 个答案: