drop down menu

[thefortrees]

Hi all -

 

I am trying to implement the "Son of Suckerfish" drop down menu --> http://www.htmldog.com/articles/suckerfish/dropdowns/.

Works fine in Mozilla, but in IE, the drop down menu alignment is off and does not disappear onmouseout.

 

Here is my php function that outputs javascript and html:

     function indexNavBar($current) {
	$nav = "<script type=\"text/javascript\">"
		. "sfHover = function() {
			var sfEls = document.getElementById(\"navmenu\").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>";

	$pages = array(
			"Home" => "index.php",
			"Customer Login" => "survey.php",
			"Company Login" => "login.php",
			"About" => "#",
			"Target Industries" => "industries.php",
			"Register" => "#",
			"Contact" => "contact.php"
			);

	$about = array(
			"TellBuddy" => "about.php",
			"INQUIZIVE?" => "#"
			);

	$register = array(
			"Company" => "register_company.php",
			"Individual" => "register_individual.php"
			);

	$nav .= "<ul id=\"navmenu\">";

	foreach ($pages as $name => $url) {
		$nav .= "<li><a href=\"$url\">$name</a>";

		if ($url == "#") {
			$nav .= "<ul>";

			if ($name == "About") {
				foreach ($about as $n => $u)
					$nav .= "<li><a href=\"$u\">$n</a></li><br><br>";
			}
			elseif ($name == "Register") {
				foreach ($register as $n => $u)
					$nav .= "<li><a href=\"$u\">$n</a></li><br><br>";
			}

			$nav .= "</ul>";
		}

		$nav .= "</li>";

	}

	$nav .= "</ul> <br><br>";

	return $nav;
}

 

And here is the corresponding CSS code:

#navmenu, #navmenu ul {
padding: 0;
margin: 0;
list-style: none;
}

#navmenu a {
display: block;
width: 10em;
border: 1px solid #0E3B65;
}

#navmenu li {
float: left;
width: 10em;
}

#navmenu li ul {
position: absolute;
width: 10em;
left: -999em;
}

#navmenu li:hover ul {
left: auto;
}

#navmenu li:hover ul, #navmenu li.sfhover ul {
left: auto;
}

 

Any help is GREATLY appreciated! Thanks!