dropdown menu: whole menu comes down

Question

I'm trying to make a basic dropdown menu with css and html. However when I hover on the li that has to drop down, my whole menu comes down with it.

This is my code:

<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>

And the 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;
}

I know it's a lot of CSS for such a basic menu but I don't know how to make it more compact. Can someone please tell me what I'm doing wrong with the dropdown menu?

Answer 1

Add this css

ul li{
    position:relative;
}

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

FIDDLE