Here is the HTML -
<div id="nav">
<ul class="level1">
<li class="submenu"><a href="../orderflow/control.aspx">Order Control</a></li>
<ul class="level2">
<li><a href="#">Summary</a></li>
</ul>
<li class="submenu"><a href="#">Product Control</a></li>
<ul class="level2">
<li><a href="poroduct-add.aspx">Add Product</a></li>
<li><a href="poroduct-del.aspx">Delete Product</a></li>
<li><a href="poroduct-edit.aspx">Edit Product</a></li>
</ul>
<li class="submenu"><a href="#">Supplier Control</a></li>
<ul class="level2">
<li><a href="#">Add Supplier</a></li>
<li><a href="#">Delete Supplier</a></li>
<li><a href="#">Edit Supplier</a></li>
</ul>
<li class="submenu"><a href="#">Prog Control</a></li>
<ul class="level2">
<li><a href="#">Add Prog</a></li>
<li><a href="#">Delete Prog</a></li>
<li><a href="#">Edit Prog</a></li>
</ul>
</ul>
</div>
Here's the CSS -
div#nav {
width:625px;
margin: 0 auto;
text-align:left;
color:#fff;
padding:120px 0 0 0;
}
div#nav a{
color:#fff;
text-decoration:none;
font-family: Tahoma, Arial, sans-serif;
font-size: 1.2em;
}
div#nav ul.level1 li{
float:left;
}
div#nav ul.level2 {
margin-top:3px;
}
div#nav ul.level2 li{
clear:both;
}
div#nav ul.level1 li a{
width:155px;
background-color:#59AEDA;
display:block;
text-align:center;
}
div#nav ul.level2 li a{
width:155px;
padding: 5px 5px 5px 5px;
voice-family: "\" }\""; voice-family:inherit;
width:145px;
background-color:#59AEDA;
display:block;
text-align:left;
}
div#nav ul.level2 li a:hover{
width:155px;
padding: 5px 5px 5px 5px;
voice-family: "\" }\""; voice-family:inherit;
width:145px;
background-color:#66CCFF;
display:block;
text-align:left;
}
div#nav ul ul{
display:none;
}
div#nav ul.level1 li.submenu:hover ul.level2 {
display:block;
}
