如何讓我的下拉列表中的項目下拉？

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