I generally use Dean Edwards IE7/IE8 Javascript patch to fix those annoying little areas in IE6/IE7 that don’t implement everything correctly in CSS. However with one of my current developments I had to remove this entirely because it clashed with the Style Sheet switcher that the client required on their site.
This left me with having to fix as much as possible in the discrete style sheets for IE6 and IE7, which didn’t actually prove particularly onerous since I have a policy of developing a site without any patches applied and then only applying them right at the end to clear up any outstanding issues with IE6 and 7 - thereby having a site that degrades gracefully for those with JS disabled. However this did leave me with 1 issue to resolve - that of drop down menus on a LI.HOVER.
Now IE6 only implements the HOVER pseudo-class on an A element, which therefore left me with implementing a small piece of JS code to reproduce the HOVER function on the LI element. What about fallback for those without JS? Well, since the site is Joomla driven and the main menu item is for a section I set the parameters such that the section page displays a list of its categories (that are the same as the drop down menu items), so those with JS disabled can still get to the category content.
<script type="text/javascript">
liHover = function() {
var oLis = document.getElementById("mmenu").childNodes[0].getElementsByTagName(”li”);
for (var i=0; i
oLis[i].onmouseover=function() {
this.className+=” lihover”;
}
oLis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” lihover\\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(”onload”, liHover);
</script>
This JS code is place in the HEAD element within the following code to ensure it is only run against IE browsers below IE7:
<!--[if lte IE 6]>
JS code goes here………
<![endif]–>
I place the the menu UL’s inside a containing DIV called ‘mmenu’ and the JS code attaches a new class to each LI element contained within this DIV and an onmouseover is also attached to the LI. The LI can then be controlled via the new CSS class and the onmouseover event fires the drop down. Finally the code is triggered once the page is loaded to add the new CSS class and event to the LI’s, meaning you can add it to a menu that is being generated by automatically by Joomla, Wordpress or Drupal.
However if they have JS disabled they can’t switch styles anyway…….. which is a bit of a paradox really.
