/* BEGIN HORIZONTAL DROP-MENU */
#navbar{
position:relative;
width: 100%;
margin: 0 0 0 150px;
padding:0;
text-align:center;
}

#navbar li {
list-style: none;
font-size: 12px;
float: left;
text-align:center;
}

/**top level menu**/
#navbar li a {
display: block;
text-decoration: none;
color: #444;
width: 8em; /* adjust as needed or use auto */
padding: 5px;
border-top: 1px solid #AAA;
border-right: 1px solid #AAA;
border-bottom: 1px solid #CCC;
background: #DDD;
font-weight:400;
line-height: 3em;
}

/**add left border to first item**/
#navbar li a.first {border-left: 1px solid #AAA;}

/**top menu style on mouse over**/
#navbar li a:hover {
background: #666;
color: #00FF00;
}

/**sub-menu**/
#navbar li ul {
display: none;
background-color: #999;
text-align:center;
margin:0;
padding:0 1em;
}

/**sub-menu, help for IE6 JavaScript**/
#navbar li:hover ul,
#navbar li.hover ul {
display: block;
position: absolute;
padding: 0;
}

#navbar li:hover li,
#navbar li.hover li {
float: none;
}

/**drop-menu style**/
#navbar li:hover li a,
#navbar li.hover li a {
background-color: #999;
border-bottom: 1px solid #FFF;
color: #FFF;
width: 8em; /* adjust width as needed or use auto */
}

/**drop-menu style on mouse over**/
#navbar li li a:hover {
background-color: #666;
color: #00FF00;
}
/**end Horizontal drop-menus**/

/**clear menu floats after ul**/
.clearing {clear:both; height: 1px; visibility: hidden;}

<script type="text/javascript">
//Script to make drop-menus work in IE6/
//<!--[CDATA[
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//]]-->
</script>

<!--Begin Horizontal navbar-->
<ul id="navbar">
<li><a class="first" href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three &gt; </a><ul><li>
<a href="#">Subitem 1</a></li><li>
<a href="#">Subitem 2</a></li><li>
<a href="#">Subitem 3</a></li></ul>
</li>
<li><a href="#">Item Four</a></li>
<li><a href="#">Item Five &gt; </a><ul><li>
<a href="#">Subitem 1</a></li><li>
<a href="#">Subitem 2</a></li></ul>
</li>
<li><a href="#">Item Six &gt; </a><ul><li>
<a href="#">Subitem 1</a></li><li>
<a href="#">Subitem 2</a></li></ul>
</li>
</ul>
<!--end navbar -->

<!--IMPORTANT! clear floats with a p, br, or hr class -->
<hr class="clearing" />