Suckerfish Dropdowns problem

[lena_k198]

I have a problem with Suckerfish Dropdowns,

The dropdowns are working perfect in Firefox, but not in IE.

The problem is that the dropdowns stay dropped even when the mouse is moved aside. Does anyone know how to fix it?

Here is the java script code:

<script language="JavaScript" type="text/javascript">
<!--
sfHover = function() {
var sfEls = document.getElementById("subnav").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>

Here is he css code

h6#dhs-headername {
background: #fff;
margin:0;
padding:0 0 5px 5px;
}
h6#dhs-headername a {
font-size: 11px;
color: #416487;
text-decoration:none;
}




/* DHS Tabs */



#dhs-tabs {
width: 750px;
border-bottom: 5px #fff solid;

}
#subnav, #subnav ul { 
list-style: none;
/*line-height:1;*/
margin: 0;
padding: 0;
z-index: 1;
}
#subnav {
width: 745px;
margin: 0 0 0 5px;
}
#subnav li { 
float: left;
background-color: #5d7da7;
border-right: 1px #90a6c3 solid;
padding: 0 0 0 0;
}
#subnav a {
display: block;
font-family: Arial, Verdana, sans-serif;
font-size: 11px;
color: #fff;
text-decoration: none;
}

#subnav li a {
padding: 5px 10px;
}

#subnav li a:hover{
background-color:#416487;
color: #fff;

}


#subnav li ul {
position: absolute;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#subnav li:hover ul, #subnav li.sfhover ul {
left: auto;
}
#subnav li ul li a {
width: 12em;
padding: 5px 5px 5px 5px;
color: #33527a;
letter-spacing:normal;
}

#subnav li ul li a:hover{
background-color:#416487;
color: #fff;
}


#subnav li ul li{ 
background-color: #fff;
border-style: solid;
border-color: #90a6c3;
border-width: 0 1px 1px 1px;
padding: 0 0 0 0;
}
#subnav li ul li.dh-brdr {
 border-top: 1px #90a6c3 solid;
}
#subnav li.d-indent {
border-left:none;
}
#subnav li ul.dhs-rbrdr {
position: absolute;
width: 10em;
left: -999em;
}
#subnav li:hover ul.dhs-rbrdr {
left: 620px;
}





#content, #leftnav, #rightnav {
/*border-top: 5px #fff solid;*/
}

/* DHS Tabs 
#dhs-tabs{
margin:5px 0 5px 0;
padding:0;
float: left;
}
#subnav {
background-color: #5d7da7;
border-bottom: 1px solid #90a6c3;
border-top: 1px solid #90a6c3;
margin:0 5px 0 5px;
padding:0;
}
#subnav li {
list-style: none;
display: inline;
border-left: 1px solid #90a6c3;
margin:0;
padding: 0;
}
#subnav li a {
text-decoration: none;
color: #fff;
font-family: Arial, Verdana, sans-serif;
font-size: 11px;
margin: 5px;
}
#subnav li.d-indent {
border-left:none;
}
h6#dhs-headername {
margin:0 0 5px 5px;
padding:0;
}
h6#dhs-headername a {
font-size: 10px;
color: #5d7da7;
}*/

Please let me know if have the answer!

Thanks!

[rocknbil]

Welcome aboard lena_k198, is this code located in the head of the document?

If so, move it to the bottom just before the closing body tag, like

<script type="text/javascript">
//here
</script>
</body>
</html>

Guessing the elements are not rendered when it's called.