在導航欄下創建一個下拉菜單

Question

我有一個水平導航欄，我希望它有一個下拉菜單。我已經在其他網站上進行了在線搜索，包括這個論壇，但它沒有爲我工作，直到它搞砸了導航欄的樣式。所以我希望通過詢問這裏找到另一種可能的解決方案。

這就是我想讓導航欄看起來像是在下拉菜單上懸停時的樣子。 dropdownlist

這些是我的html代碼和css代碼。

HTML代碼：

<ul class="main"> 
    <li class="main"><a href="cart.php" target="_blank"><img style ="margin-top:-5px;" src="http://i63.tinypic.com/2u43au0.png" border="0" width="25" height="25"/></a></li> 
    <li class="main"><a href="#about">About</a></li> 
    <li class="main"><a href="login.php">Login/Register</a></li> 
</ul> 

CSS代碼：

ul.main { 
    list-style-type: none; 
    margin: -10px -30px; 
    width: 1268px; 
    height: 50px; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
    margin-top:10px; 
    margin-top: 10px; 

} 

li.main { 
    float: right; 
} 

li.main a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 17px 16px; 
    text-decoration: none; 
    font-family:Helvetica; 
    font-size:13px; 
    height: 50px; 
} 

li.main a:hover { 
    background-color: #111; 
} 

的jsfiddle：https://jsfiddle.net/vds0LLg9/

Answer 1

這是一個非常有用的網站，將教你如何製作下拉菜單。

http://www.w3schools.com/css/css_dropdowns.asp

我會極力推薦他們的任何教程。