When hovering over the Gallery, the sub menu list displays next to each other, but I want Sub 1 and Sub 2 to display below each other as a dropdown. How can I improve this code and is there any unnecessary code in it?
Here is the picture:
HTML:
<div id="menu_wrapper">
<div id="menu">
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#" target="_parent">Gallery</a>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
</ul>
</li>
<li><a href="#" target="_parent">Plants</a></li>
<li><a href="#" target="_parent">News</a></li>
<li><a href="#" class="last">Contact</a></li>
</ul>
</div> <!-- end of menu -->
</div><!-- end of menu_wrapper -->
CSS
/*
CSS
*/
#menu_wrapper {
width: 100%;
height: 80px;
margin: 0 auto;
background: url(menu_bar.jpg) no-repeat center top;
}
#menu {
width: 900px;
height: 80px;
margin: 0 auto;
background: url(menu_bar.jpg) no-repeat center top;
}
#menu ul {
float: left;
margin: 0px;
padding: 30px 0 0 150px;
list-style: none;
}
#menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#menu ul li a {
position: relative;
float: left;
display: block;
width: 115px;
height: 30px;
padding: 5px 0 0 0;
margin-right: 10px;
text-align: center;
font-size: 16px;
font-family: Georgia, "Times New Roman", Times, serif;
text-decoration: none;
color: #eee901;
font-weight: bold;
outline: none;
background: url(menu_item.png) no-repeat;
}
#menu li a:hover, #menu li .current {
color: #FFF;
}
#menu ul ul {
display:none;
position:absolute;
text-align:left;
float:left;
}
#nav ul ul li {
display:block;
}
#menu ul li:hover ul {
display:block;
}
#menu ul li:hover ul li{
style:none;
}