Hi all,

I'm incorporating a new drop-down menu in an existing website and have run into a few issues that I'm having problems resolving. If anyone could take some time to look at these issues and the following code I'd appreciate it.

1. I've set up each top-level link with a 4px right margin, however my bg color extends over the margin on mouse over. I can think of a way to resolve this using a bg image but didn't know if there was another way.

2. I cannot figure out a way to have the top level text color to remain white when hovering over the drop-down items.

3. Other than that the menu works fine in all browsers EXCEPT ie 5.01. Simply put, it's just an ugly mess there.

Code HTML4Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title</title>
<script type="text/javascript" language="JavaScript1.2"> 
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
 
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #831818;
}
 
div#blacknav {
	height: 27px;
	border: solid 4px #000000;
	background-color: #000000;
	}
 
#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	}
 
#nav li {
	float: left;
	display: block;
	margin-right: 0px;
	}
 
#nav a {
	display: block;
	height: 100%;
	padding-top: 6px;
	padding-bottom: 7px;
	width: 90px;
	margin-right: 4px;
	border: solid 1px #4D4D4D;
	text-align: center;
	font: bold 11px Verdana, Arial, Helvetica, sans-serif;
	color: #999999;
	text-decoration: none;
	line-height: 12px;
	}
 
#nav a:hover {
	color: #fff;
	background-color: #505050;
	}
 
#nav li:hover, #nav li.sfhover {
	color: #fff;
	background-color: #505050;
	}
 
#nav li ul {
	position: absolute;
	width: 185px !important;
  	width /**/:175px;
	left: -999em;
	border: solid 1px #cccccc;
	}
 
#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
	}
 
#nav li ul li {
	float: left;
	display: block;
	}
 
#nav li ul a {
	display: block;
	width: 175px;
	margin: 0px;
	padding: 5px;
	border: 0px;
	background-color: #FFF7E7;
	text-align: left;
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	}
 
#nav li ul a:hover {
	background-color: #FFEBC6;
	color: #666666;
	}
-->
</style></head>
 
<body>
<div id="blacknav">
        <ul id="nav">
          <li><a href="#">Services</a>
 
              <ul>
                <li><a href="#">Applied Social Science Research & Evaluation</a></li>
                <li><a href="#">Consulting</a></li>
                <li><a href="#">Democracy Education</a></li>
                <li><a href="#">Early Childhood Development</a></li>
                <li><a href="#">Economic & Public Policy Research</a></li>
 
                <li><a href="#">Special Projects</a></li>
                <li><a href="#">Training</a></li>
                <li><a href="#">Workforce Development</a></li>
              </ul>
          </li>
          <li><a href="#">Publications</a>
              <ul>
 
                <li><a href="#">Institute News</a></li>
                <li><a href="#">Media Coverage</a></li>
              </ul>
          </li>
          <li><a href="#">Press Room</a></li>
          <li><a href="#">About Us</a>
              <ul>
 
                <li><a href="#">Background</a></li>
                <li><a href="#">Contract Opportunities</a></li>
                <li><a href="#">Customers</a></li>
                <li><a href="#">Employment Opportunities</a></li>
                <li><a href="#">Executive Management Bios</a></li>
                <li><a href="#">Frequently Asked Questions</a></li>
 
                <li><a href="#">Privacy Statement</a></li>
                <li><a href="#">Staff</a></li>
              </ul>
          </li>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Site Map</a></li>
        </ul>
 
    </div>
</body>
</html>