<ul id='nav'>
<li class='gold'>Menu Gold
<ul>
<li class=''><a href='Sub Menu 1'>Sub Menu 1</a></li>
<li class=''><a href='Sub Menu 2'>Sub Menu 2</a></li>
<li class=''><a href='Sub Menu 3'>Sub Menu 3</a></li>
<li class=''><a href='Sub Menu 4'>Sub Menu 4</a></li>
</ul>
</li>
<li class='green'>Menu Green
<ul>
<li class=''><a href='Sub Menu 1'>Sub Menu 1</a></li>
<li class=''><a href='Sub Menu 2'>Sub Menu 2</a></li>
<li class=''><a href='Sub Menu 3'>Sub Menu 3</a></li>
<li class=''><a href='Sub Menu 4'>Sub Menu 4</a></li>
</ul>
<li class='pink'><a class='pink' href=''>Menu Pink</a></li>
</ul></div>
<div id="clearleft">
</body>
</html>
CSS
#nav{
list-style:none;}
#nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
/*line-height: 1;*/
height:36px;
}
#nav a {
display: block;
text-decoration:none;
color:#FFFFFF;
}
#nav li { /* all top list items */
float: left;
width: 160px; /* width needed or else Opera goes nuts */
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
height:36px;
}
#nav li:hover{
height:123px;
}
#nav li ul { /* second-level lists */
position: relative;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
text-align:left;
top:91px; /* set to start after image */
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
margin:0;
padding:0;
}
#nav ul li{
font-size:11px;
font-weight:normal;
text-align:left;
padding-left:5px;
height:18px;
padding-bottom:10px;
}
#nav ul li:hover{
height:18px; /* required to prevent 2nd level li set to 123 */
}
#nav ul li a:hover{
background:#ffffff;
opacity: .4;
filter: alpha(opacity=40);
color:#000000;
width:100%;
margin-left:-5px; /* moves hover block left and then re pads the text */
padding-left:5px;
}
#clearleft {
clear: left;
color: #ccc;
}
/*menu 1 Gold */
#nav li.gold {
width: 170px; /* width needed or else Opera goes nuts */
}
#nav a.gold {
width: 165px; /* width needed or else Opera goes nuts */
}
#nav .gold li{
width:160px; /* 5 less for padding in nav ul li * only overided in gold class as its wider*/
}
.gold{
width:170px;
background:url(images/menu/menubarLeft.jpg) no-repeat left top;