IE menu hover fix

I run into an issue a lot with fly-out and dropdown menus not always layering on TOP of the subsequent content. I see this most often with Farcry because that is what I use for a lot of sites but I see it elsewhere as well. It can be the most irritating thing in the world to deal with but it CAN be fixed.

In farcry sites, there is a navigation.js or hover.js file that is loaded which provides a nice *hack* for IE6. The purpose of this is that for multi-level navigations, the dropdown/flyout appears when you hover over an LI tag. IE6 only recognizes the seudo element (:hover) on A tags so this javascript file manually adds a class to every LI tag that is a child of a particular element. I.E. if your outer UL has an ID of “menu” this class will be added to all sub-elements.

Here’s what the basic javascript looks like:

hover = function() {
var nav = document.getElementById("menu");
if(nav){
var nodes = nav.getElementsByTagName("li")
for (var i=0; i<nodes.length; i++) {
nodes[i].onmouseover=function() {
this.className+=" hover";
}
nodes[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
}
if (window.attachEvent) window.attachEvent("onload", hover);

I know, not necessarily that “basic” but all it’s doing is attaching an “onMouseOver” and “onMouseOut” event handler to all LI tags under the element with ID “menu”.

Now, back to the original problem… The dropdown/flyout menus don’t always layer OVER the content in the page. This is thanks to IE rendering all elements with a z-index of 0. Regardless of what you set this to in your CSS (generally z-index of the flyout is higher than the z-index of the page) IE will make it all 0 at the time of loading.

I dealt with this problem for months always hacking my way through a fix depending on the site until it finally dawned on me. I can use this javascript to my advantage because this code runs “onload” (once the page has loaded). Conveniently, this is also after z-indexes have been butchered by IE. So, here is a quick alteration to that javascript that has fixed every problem I’ve run into thusfar:

hover = function() {
var nav = document.getElementById("menu");
nav.style.zIndex = 100;
if(nav){
var nodes = nav.getElementsByTagName("li")
for (var i=0; i<nodes.length; i++) {
nodes[i].onmouseover=function() {
this.className+=" hover";
}
nodes[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
}
if (window.attachEvent) window.attachEvent("onload", hover);

Notice the line “nav.style.zIndex = 100;”. That’s all it took. Of course, your situation may be much more complex than this and may require more layering of elements. Using this same example you can simply reset z-indexes even if you don’t have a complex menu. Here would be an example of that:

resetZIndexes= function() {
var nav = document.getElementById("menu").style.zIndex = 100;
// other elements would go here
}
if (window.attachEvent) window.attachEvent("onload", resetZIndexes);

I really hope this helps someone avoid the agonizing pain that I had to endure prior to figuring this out.