Similar Post:
html css drop down menu in navigation bar
I am trying to modify an existing horizontal menu to display vertical links when hovering over each category. How can I achieve this to make it function like a traditional dropdown menu?
Check out what I have done so far: http://jsfiddle.net/chaddly/GrEWS/3/
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
#nav li a:hover
{
background-color:#333333;
padding-bottom:12px;
border-bottom:2px;
border-bottom-color:#f37022;
border-bottom-style:solid;
margin:-1px;
}
#nav li a
{
font-family:Arial;
font-size:12px;
text-decoration: none;
float:left;
padding:10px;
background-color: #123261;
color:#ffffff;
border-bottom:1px;
border-bottom-color:#000000;
border-bottom-style:solid;
}
#nav li
{
display:inline;
}
#nav
{
padding:0;
}
Here is a sample of what I'm aiming for.