如何将下拉列表中的项目下拉？

Question

我正在尝试格式化下拉框，但我的列表不会下拉。下面是HTML。我想在顶部有5个按钮，文章按钮应该在悬停时创建一个下拉子菜单。任何帮助将不胜感激！

<div id="menu">
    <ul>
        <li id="current"><a href="index.html">Home</a></li>
        <li><a href="2-columns.html">Articles</a>         
            <ul class="submenu">
            <li><a href="index.html">Fermanagh Fracking News</a></li>
            <li><a href="2-columns.html">Fracking Across The Globe</a></li>
            </ul>
        </li>
        <li><a href="index.html">Account</a></li>   
        <li><a href="index.html">Help</a></li>  
        <li><a href="index.html">Contact Us</a></li>

    </ul>
</div>

以下是我正在使用的CSS。我最初使用模板，并且在尝试添加元素以实现下拉功能时遇到了困难。

#menu {
clear: both;    
padding: 0;         
}
#menu ul {
float: left;
list-style: none;
background: #17B1D8; /* url(nav.jpg) repeat-x;  */
width: 850px;
padding: 0;
margin: 0 0 0 30px;
height: 45px;
display: inline;
text-transform: uppercase;
}
#menu ul {
float: left;
list-style: none;
background: #17B1D8; /* url(nav.jpg) repeat-x;  */
width: 850px;
padding: 0;
margin: 0 0 0 30px;
height: 45px;
display: inline;
text-transform: uppercase;
}
#menu ul li
{
display: inline;
margin: 0; padding: 0;
}
#menu ul li a{
display: block;
float: left;
width: auto;
margin: 0;
padding: 0 15px;    
border-right: 1px solid #dadada;
border-left: 1px solid #fafafa; 
border-bottom: none;
color: #555;
font: bold 14px/45px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-   serif;
text-transform: uppercase;
text-decoration: none;  
letter-spacing: 1px;
}
#menu ul li a:hover, 
#menu ul li a:active {
color: white;}
#menu ul li#current a { 
background: #6CCE70 url(nav-current.jpg) repeat-x;  
}
#menu ul li ul {
display: none;/*hides submenu*/
}
#menu li ul:hover, #menu ul li:hover {  display: block;
position: absolute;
float:left;}
#menu ul li a {
display: block;
text-decoration: none;
}
/* shows the submenu*/
#menu ul li:hover ul.submenu{
display: block;
position: absolute;
float:left;
}
#menu ul li:hover li {
float: none;
width:400px;/*buttons will expand when mouse over*/
}

Answer 1

Demo Fiddle

您需要对CSS进行一些实质性的更改，下面的内容应该为您提供一个起点：

#menu>ul, #menu>ul>li>ul {
    list-style: none;
    background: #17B1D8;
    padding: 0;
    margin:0;
    text-transform: uppercase;
}
#menu>ul {
    width: 850px;
    margin: 0 0 0 30px;
    height: 45px;
}
#menu>ul>li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

#menu li a {
    display: block;
    width: auto;
    padding: 0 15px;
    color: #555;
    font: bold 14px/45px"Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans- serif;
    text-decoration: none;
    letter-spacing: 1px;
}
#menu ul li a:hover, #menu ul li a:active {
    color: white;
}
#menu ul li#current a {
    background: #6CCE70 url(nav-current.jpg) repeat-x;
}
#menu>ul>li>ul {
    display: none;
}
#menu>ul>li:hover ul {
    display: block;
    position: absolute;
}
#menu ul li:hover li {
    width:400px;
}