在导航栏下创建下拉菜单

Question

我有一个水平导航栏，我希望它有一个下拉菜单。我已经在其他网站上在线搜索过，包括这个论坛，但是它没有一个对我有用，只是它搞砸了导航栏的样式。所以我希望通过这里询问找到另一种可能的解决方案。

这就是我希望导航栏在使用下拉菜单悬停在其上时的样子。 dropdownlist

这些是我的HTML代码和CSS代码。

HTML代码：

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

CSS代码：

{{1}}

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

Answer 1

这是一个非常有用的网站，它将教你如何制作下拉菜单。

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

我强烈推荐他们的任何教程。