html - 下拉菜单 : whole menu comes down

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