下拉菜單：整個菜單降臨

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