You've seen the 'suckerfish' menus and the 'son of suckerfish', well I think that this one takes them another step further (grandson of suckerfish?).

The 'problem' that I found with using the 'suckefish method' is that you need to style for IE5.x and IE6 as well as for IE7 and non-IE browsers by using li:hover; AND li.sfhover; and this is a bit tedious and not quite correct to have styles for a 'non-existent' class. So I thought that whilst we were rewriting the source code to add 'hover' classes to the <li> elements we might as well use javascript to add the IE5.x and IE6 styling for us. So that is what this demonstration does.

If you examine the stylesheet for the above menu you will only see the li:hover styling. A very small javascript routine is used to search out each occurance of li:hover and create a new selector with li.iehover instead and finally uses the 'suckerfish' approach to rewrite the source code on mouseover and mouseout using li.iehover.

So now all we need to do is produce our unordered list and style it for Firefox, Opera, IE7, Safari etc. then let the javascript take care of IE6. The only difference is that IE6 doesn't understand the child selector '>' so will not show the path followed through the menu structure.

The javascript

/* Credits: Stu Nicholls */

stuHover = function() {
 var cssRule;
 var newSelector;
 for (var i = 0; i < document.styleSheets.length; i++)
  for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
   {
   cssRule = document.styleSheets[i].rules[x];
   if (cssRule.selectorText.indexOf("LI:hover") >= 0)
   {
     newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
    document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
   }
  }
 var getElm = document.getElementById("nav").getElementsByTagName("LI");
 for (var i=0; i<getElm.length; i++) {
  getElm[i].onmouseover=function() {
   this.className+=" iehover";
  }
  getElm[i].onmouseout=function() {
   this.className=this.className.replace(new RegExp(" iehover\\b"), "");
  }
 }
}
if (window.attachEvent) window.attachEvent("onload", stuHover);