Html 如何让下拉列表中的项目下拉？

我正在尝试设置下拉框的格式，但我的列表不会下拉。下面是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>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;
}

---

您自己试过调试吗？我在JSFIDLE中试过您的代码，但似乎存在一些悬停问题：

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