내 드롭 다운 목록의 항목을 어떻게 삭제합니까?

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입니다. 처음에는 템플릿을 사용했으며 요소를 추가하여 드롭 다운 기능을 구현하는 데 어려움을 겪었습니다.

당신은 당신의 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

, 아래 당신에게 출발점 제공해야합니다 :

이

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