Drop Downs not working right in IE

[lazerbrains]

I am having trouble getting my drop down menus to work correctly in IE (6 and 7). I used the Son of Suckerfish Dropdowns which I found on this site:

http://www.htmldog.com/articles/suckerfish/dropdowns/

Everything works perfectly in Firefox and Opera, but in IE only the first drop down will appear. The subsequent drop downs will not show up. I am not sure what would be causing that. Here is my CSS:

#nav {
	
	width: 36em;
	list-style: none;
	line-height: 2.5;
	background-color: white;
	font-weight: bold;
	padding: 0;
	border: solid #007451;
	border-width: 1px 0;
	margin: 0 0 2em 0;
}

#nav ul {
	background-color: white;
	border: solid #007451;
	border-width: 1px 0;
	margin: 0 0 1em 0;
	font-weight: bold;
}

#nav a {
	width: 9em;
	w\idth: 6em;
	display: block;
	color: #00553b;
	text-decoration: none;
	list-style: none;
}

#nav a.daddy {
	background: url(rightarrow2.gif) center right no-repeat;
}

#nav li {
	float: left;
	padding: 0;
	width: 9em;
	w\idth: 6em;
	list-style: none;
	margin: 0;

}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14.4em;
	w\idth: 13.9em;
	border-width: 0.25em;
	margin: 0;
	list-style: none;
	
}

#nav li li {
	padding-right: 1em;
	width: 13em;
	list-style: none;
}

#nav li ul a {
	width: 13em;
	list-style: none;
	
}

#nav li ul ul {
	margin: -2.75em 0 0 14.2em;
	list-style: none;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
	list-style: none;
}



#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
	list-style: none;
}



#nav li:hover, #nav li.sfhover {
	background: #e1f2e7;
	list-style: none;
}



#nav a.daddy {
	background: url(rightarrow2.gif) center right no-repeat;
}



#content {
	clear: left;
}

#content a,  {
	color: #e1f2e7;
}

#content a:hover, {
	text-decoration: none;
}

#nav li:hover, #nav li.hover, #nav li:sfhover, #nav li.sfhover {
    position: static;
}


#nav, #nav ul {
	list-style:none;
	padding:0;
	margin:0;
}
#nav li {
	float:left;
	position:relative;
	line-height: 2.5em;
	width: 10em;
}

and my Javascript is just copied from the Son of Suckerfish site:

<script type="text/javascript"><!--//--><![CDATA[//><!--
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>



	<script type="text/javascript" language="Javascript">
		<!-- Hide script from older browsers

		function toggleMenu(currMenu) {
			if (document.getElementById) {
				thisMenu = document.getElementById(currMenu).style
				if (thisMenu.display == "block") {
					thisMenu.display = "none"
				}
				else {
					thisMenu.display = "block"
				}
				return false
			}
			else {
				return true
			}
		}

		// End hiding script -->
	</script>
		

		<script type="text/javascript" language="Javascript">	
		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>

And my List menus are as follows:

<ul id="nav">
	  <li><a href="<?= $webroot ?>index.php?view=main.about" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about','','images/nav_about_f2.jpg',1)"><img src="<?= $imagesroot ?>nav_about.jpg" name="about" width="106" height="29" border="0"></a>
	    <ul style="padding: 2;">
		<li><a href="http:www.mysite.com/home">Board of Directors</a></li>
		<li><a href="http:www.mysite.com/home">Staff Officers</a></li>
		<li><a href="http:www.mysite.com/home">Staff</a></li>
		<li><a href="http:www.mysite.com/home">Administration</a></li>
		<li><a href="http:www.mysite.com/home">Facts & Figures</a></li>
		<li><a href="http:www.mysite.com/home">Our Heritage &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>>></strong></a>
			<ul style="padding: 2;">
			<li><a href="http:www.mysite.com/home">Our Heritage</a></li>
			<li><a href="http:www.mysite.com/home">Past Presidents</a></li>
			<li><a href="http:www.mysite.com/home">Blah Blah</a></li>
			<li><a href="http:www.mysite.com/home">Blah Blah</a></li>
			<li><a href="http:www.mysite.com/home">Timeline</a></li>
			<li><a href="http:www.mysite.com/home">References </a></li>
			</ul>
		</li>
		
		<li><a href="http:www.mysite.com/home">Community Benefit</a></li>
			
		</ul>
		
		</ul>

Any Ideas on why it would work in Firefox and Opera, but only the first menu would work in IE? Any thoughts on this would be helpful.

[Fang]

The code given does not work in FF; there are errors in the css and you have added position property values that are preventing IE from working correctly.
Also the width of sub-menu anchors is incorrect:

#nav li ul a {
	width: 14.4em; /* correct value */
	list-style: none;
}

ANY changes or additions to the Suckerfish code should be checked very carefully!

[lazerbrains]

Thanks so much for your help. It turns out the problem was regarding the fact that I was using multiple ID tags that with the same name. (one for each drop down) I changed it so that the whole table that was holding the drip downs used that ID and took it off the individual lists. Now it works. But it is still being displayed incorrectly in IE. When you rollover a any of the list items, a light colored highlight covers the area of that link. It works fine in all browsers but IE 6 or 7. In IE it doesn't go all the way across the menu, even when I give it a width of 100%. Any idea why this doesn't work correctly?
here is my CSS:

<!-- NEW DROPDOWN MENUS--->

#horizontalNav tr td ul {
	
	width: 36em;
	list-style: none;
	line-height: 2.5;
	background-color: white;
	font-weight: bold;
	padding: 0;
	border: solid #007451;
	border-width: 1px 0;
	margin: 0 0 2em 0;
}

#horizontalNav tr td ul ul {
	background-color: white;
	border: solid #007451;
	border-width: 1px 0;
	margin: 0 0 1em 0;
	font-weight: bold;
}

#horizontalNav tr td ul a {
	width: 9em;
	w\idth: 6em;
	display: block;
	color: #00553b;
	text-decoration: none;
	list-style: none;
}

#horizontalNav tr td ul a.daddy {
	background: url(rightarrow2.gif) center right no-repeat;
}

#horizontalNav tr td ul li {
	float: left;
	padding: 0;
	width: 9em;
	w\idth: 6em;
	list-style: none;
	margin: 0;

}

#horizontalNav tr td ul li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14.4em;
	w\idth: 13.9em;
	border-width: 0.25em;
	margin: 0;
	
	
}

#horizontalNav tr td ul li li {
	padding-right: 1em;
	width: 13em;
	
}

#horizontalNav tr td ul li ul a {
padding-right: 1em;
	width: 15em;
	
	
}

#horizontalNav tr td ul li ul ul {
	margin: -2.75em 0 0 13.9em;
	
}

#horizontalNav tr td ul li:hover ul ul, #horizontalNav tr td ul li:hover ul ul ul, #horizontalNav tr td ul li.sfhover ul ul, #horizontalNav tr td ul li.sfhover ul ul ul {
	left: -999em;
	
}



#horizontalNav tr td ul li:hover ul, #horizontalNav tr td ul li li:hover ul, #horizontalNav tr td ul li li li:hover ul, #horizontalNav tr td ul li.sfhover ul, #horizontalNav tr td ul li li.sfhover ul, #horizontalNav tr td ul li li li.sfhover ul {
	left: auto;

	
}



#horizontalNav tr td ul li:hover, #horizontalNav tr td ul li.sfhover {
	background: #e1f2e7;
	padding:0;
	margin:0;
	width: 100%;
}



#horizontalNav tr td ul a.daddy {
	background: url(rightarrow2.gif) center right no-repeat;
}



#content {
	clear: left;
}

#content a,  {
	color: #e1f2e7;
}

#content a:hover, {
	text-decoration: none;
}

#horizontalNav tr td ul li:hover, #horizontalNav tr td ul li.hover, #horizontalNav tr td ul li:sfhover, #horizontalNav tr td ul li.sfhover {
    position: static;
	padding:0;
	margin:0;
	width: 100%;
}


#horizontalNav tr td ul, #horizontalNav tr td ul ul {
	list-style:none;
	padding:0;
	margin:0;
}
#horizontalNav tr td ul li {
	float:left;
	position:relative;
	line-height: 2.5em;
	width: 10em;
	padding:0;
	margin:0;
}

Any ideas would be helpful.


Thanks for your help.