在导航栏下创建一个下拉菜单

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

我会极力推荐他们的任何教程。