3 issues

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. :nono:

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>

Ok, it's been a long day, but I figured out #1 and #3. Seems IE5 would rather have width: 90px; and margin-right: 4px; declared in #nav li rather than #nav a.

Now to tackle #2.

Still looking for any takers! :)

#2
Instead of changing the colours on hovering the a, try changing them on hovering the li :

Code:

#nav li:hover a, #nav li.sfhover a { color: #fff; background-color: #505050; }

Also, in your code you pasted above, notice how the colour changes partway through the first li ? The "&" should be escaped :

Code:

<li><a href="#">Applied Social Science Research & Evaluation</a></li>

Thank you for responding, Centauri. (And thanks for the reminder about my lazy & mark-up)

Once I read your suggestion I had a "Duh, of course!" moment. It implemented well. Ran into a small issue with all of the lower-level a's picking up the grey background, but I resolved it with this:

Code:

#nav li:hover ul a, #nav li.sfhover ul a { color: #666666; background-color: #FFF7E7; }

Thanks again!