выпадающее меню: все меню сходит

Question

Я пытаюсь создать базовое выпадающее меню css и html. Однако, когда я нахожусь на ли, который должен выпасть, все мое меню сводится к нему.

Это мой код:

<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