IE dropdown menu woes

I’m having an issue that seems to be nothing new.

Dropdowns become stuck on rollover in IE 6/7, and do not disappear unless the browser is refreshed.

Site is here:

PDX Kids Calendar Test Site

They seem to stick in Opera and FF as well here.

Since CSS won’t ‘stick’ like that in opera, I’d say that’s a scripted menu? If so then I’d say faulty script, ask over in the javascript section.

Though that’s a bit of a case of “using javascript to do CSS’ job”

I’ve seen this issue discussed around here before. Here’s one link I found. See if this helpeth:

This may also help:

http://css-class.com/articles/explorer/sticky/index.htm

Hi,

You have corrupted the JS in that you are applying the sfhover class to make the hover but not removing the same class.


<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {

    if (!document.getElementsByTagName) return false;

    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[B](" sfhoverb[/B]"), "");

        }

    }

}

if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>


You add sfhover but you remove “sfhoverb” whch doesn’t exist so the menu stays highlighted.

It shuld have been " sfhover\\b"

IE7 doesn’t need that routine anyway so give it to IE6 only like this:


[B]<!--[if lt IE 7]>
<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>
<![endif]-->
[/B]

Make the script external because the cdata comments will mess up the conditional comments (i.e. call the script from withn the CCs).