This is PURE CSS. Tested in IE7+, Chrome, Firefox, Safari and Opera
/* Horizontal Main Nav----------------------------------------------------------------------------------------------------*/div#mainnav {
position: relative;
z-index: 100;
padding: 0px 0 0 0px;
}
div#mainnav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
div#mainnav li {
float: left;
position: relative;
margin: 0px;
padding: 0px;
list-style-type: none;
}
/* style the links for the top level */ div#mainnav a {
font-size: 12px;
height: 19px;
color: #1a1a1a;
text-decoration: none;
text-align: center;
padding: 9px 12px;
display: block;
font-weight: bold;
text-transform: uppercase;
width: auto;
margin: 0;
}
/* Style the first navigation button */div#mainnav li:first-child a {
}
div#mainnav ul li a.current {
background-color: #000;
}
div#mainnav a:hover, div#mainnav ul li:hover {
color: #FFCC00;
background: #354356;
}
/* Drop Down CSS----------------------------------------------------------------------------------------------------*/div#mainnav ul ul {
visibility: hidden;
position: absolute;
height: 0;
top: 41px;
left: 0;
z-index: 98;
}
/* style the second level links */div#mainnav ul ul a, div#mainnav ul ul a:visited {
background: #4c637e;
color: #fff;
height: auto;
padding: 12px 5px;
width: 200px;
border-width: 0 1px 1px 1px;
}
/* Style the first drop down navigation button */div#mainnav ul ul li:first-child a {
}
div#mainnav ul ul a:hover, div#mainnav:hover > a, div#mainnav ul ul:hover > a {
color: #FFCC00;
background: #354356;
}
/* style the third level background */div#mainnav ul ul ul {
left: 211px;
top: 0px;
width: 129px;
position: absolute;
z-index: 99;
}
div#mainnav ul ul ul a, div#mainnav ul ul ul a:visited {
background: #FFCC00;
color: #000;
}
/* Style the first drop down navigation button of a drop down */div#mainnav ul ul ul li:first-child a {
}
div#mainnav ul ul ul a:hover {
color: #FFCC00;
background: #354356;
}
/* style the table so that it takes no part in the layout - required for IE to work */div#mainnav table {
position: absolute;
top: 0;
left: 0;
border-collapse: collapse;
}
/* make the second level visible when hover on first level list OR link */div#mainnav ul li:hover ul, div#mainnav ul a:hover ul {
visibility: visible;
}
/* keep the third level hidden when you hover on first level list OR link */div#mainnav ul:hover ul ul {
visibility: hidden;
}
/* make the third level visible when you hover over second level list OR link */div#mainnav ul:hover ul :hover ul {
visibility: visible;
}