I've been working on the release of the new website for my work at SWCA Environmental Consultants, which has been a long time in the making. During the development of the site they wanted drop-downs for navigation (against my clearly stated opinion :) ), and I selected Son of Suckerfish for the technique.

Son of Suckerfish (or a near variant) is the nicest drop-down setup I've seen so far. It works with pure CSS on Firefox and other stardards compliant-ish browsers. One of the things it depends on is come css on the attribute of a LI tag, which IE doesn't support. So there is a very small amount of Javascript for this case. Generally a very clean and simple solution for HTML dropdowns.

Implementing it worked out perfectly, and I tested it out in all the major browsers without issue. A few months go by and, I admit, testing on IE6 fell by the wayside a bit... at some point it stopped working very well for that platform. The drop-downs were going away much to soon... as if the onMouseOut code was being executed too fast (in-between menu items).

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() {
            // **** WAS THIS ****
            // this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            // **** Changed to this setTimeout setup ****
            var t = this;
            setTimeout(function() {
                t.className=t.className.replace(new RegExp(" sfhover\\b"), "");
            }, 10);
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover)

Which has worked well so far... though I wouldn't be surprised if I could find a better way. I don't like the way I assigned 't = this', seems like there should be a better way to do that. Plus, I wouldn't be surprised if it is a very minor memory leak.

The timeout gives the mouse a chance to roll onto the next menu item, which adds yet another 'sfhover' class to the li tag. When the timeout is triggered, it only removes one. The whole thing flickers in my current ies4linux setup, but looks fine in vmware.

On another note, I discovered that ies4linux has alpha IE7 support! Just install one of these betas (I'm using 2.5-beta4) with '--beta-install-ie7'.