How do I get items in my dropdown list to drop down?

I am trying to format a dropdown box but my list won't drop down. Below is the HTML. I want to have 5 buttons along the top and the articles button should create a dropdown submenu when hovered over. Any help would be appreciated!

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

Below is the CSS I am using. I initially used a template and have been having difficulties trying to add elements to implement a dropdown feature.

#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*/
}

Answers


Demo Fiddle

You need to make some substantial changes to your CSS, the below should give you a starting point:

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

Need Your Help

Sum of an element and index in an array

python arrays list for-loop

If I have a list of numbers such as [1,2,3,4,5...] and I want to calculate an equation using the first element and first index and add to the next element with index and so on...

Scope of a dict in python

python

def taskCompletionCheck(self, jsonFile):