Howdy,

I am trying to create a horizontal dropdown menu on the site I am working on. I have created a suckerfish drop down menu with 4 levels by manipulating the code I found at htmldog.com/articles/suckerfish/ . I am having problems with the positioning of the levels when they drop down in both IE7 and FF3.

In IE the second level displays directly to the right of the first level (blocking the next 1st level link) and the 3rd level displays much further to the right on the same level as 1 and 2. In FF the second level appears directly below the first level, but the spacing of the third layer is still far enough to the right that I cannot roll my mouse over the 3rd level links without losing the menu because of the gaps between the levels. I have included the code I used for the menu below.

Please excuse my ignorance as I am a student in Anthropology, and not Web Design. I am not very familiar with CSS or javascript and I took a very basic class in html back in the late 90's, but I have been pretty much out of the loop since. I would appreciate any help I could get in making this menu work the way it should in both.


#nav, #nav ul {
padding: 0;
margin: 0 ;
list-style: none;
display: block;
width: 46em;
background:99cc00;
text-align: center;
}

#nav li {
float: left;
width: 9.2em;
background:#39F;
color: #FFF;
}

#nav li ul {
position: absolute;
background: 66cccc ;
width: 10em;
left: -999em;
}

#nav li ul ul {
margin: -1em 0 0 10em;
}

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



<script type="text/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 here is the HTML

<div id="menubar" style="width:125px;position:relative; font:'sans-serif">
<ul id="nav">
<li><a href="www.siu.edu/offices/iii/">Home</a></li>
<li><a href="www.siu.edu/offices/iii/about.html">About Us</a></li>
<li><a href="www.siu.edu/offices/iii/sos.html">Current Projects</a>
<ul>
<li><a href="#" class="daddy">Aging is an Asset</a>
<ul>
<li><a href="#" class="daddy">Forum</a></li>
<ul>
<li><a href="#">Forum I</a></li>
<li>Forum II</li>
<li>Forum III</li>
<li>Forum IV</li>
</ul>
<li><a href="#" class="daddy">History </li>
<li>Policy Papers</li>
</ul>
</li>

<li><a href="#" class="daddy">NGA Policy Academy</a>
<ul>
<li><a href="#">Policies</a></li>
</ul>
</li>

<li><a href="#">Lifelong</a>
<ul>
<li>History </li>
<li>Meetings</li>
<li>Sponsers and links</li>
</ul>
</li>

<li><a href="#" class="daddy">Retirees Strengthen the Economy</a>
<ul>
<li><a href="#">Amniataba</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="www.siu.edu/offices/iii/publications.html" class="daddy">Publications</a>
<ul>
<li>Reports
<ul>
<li> Getting Started</li>
<li><a href="#">Model Programs</a></li>
<li>P16+</li>
<li>Intergenerational Communication</li>
<li><a href="#">Macropodus</a></li>
</ul>
</li>
</ul>
<ul>
<li>Periodicals
<ul>
<li>Continuance Magazine</li>
<li>Illinois Life Long</li>
<li>Aging is an Asset Series</li>
</ul>
</li>
</ul>
</li>
<li><a href="www.siu.edu/offices/iii/about.html#partners">Partners</a></li>
</ul>
</div>
&lt;/div&gt;<font face='Arial'></font id='Arial'>