Drop down menus

As we all know (actually, many probably don't know) Internet Explorer has claimed many hours of developer time trying to get a feature working with the quirks of IE. One quirk that I've dealt with recently was the :hover pseudo-class and its implementation across various browsers. The most notable quirk is that IE only supports the :hover on anchor tags (<a>). What's a fella to do when he wants a drop down menu that displays the sub-menu when the mouse is hovering over an li element? Write some Javascript to aid IE in rendering the drop-down effect properly. The first draft of our menu is here. If you are unfortunate enough to be using IE, you probably won't see the sub-menu items. So how do we negotiate this? With a little extra class, and some Javascript. The second draft of our menu can be found here. The differences to note:

• The li:hover rule is now accompanied by a li.over as well
• The function fixHover()
• The function init()

So we added a rule that says any ul with a parent li with a class of over will also get the styling that a ul with a parent with li:hover gets; in this case - display the underlying ul. Next, we added a function (fixHover) that took an element, and retrieved all of it's immediate children nodes. We then iterate through the list of children, basically adding two events, "mouseover" and "mouseout", to for each element to observe. For "mouseover" events, append the classname "over" to the element; on "mouseout" events, remove the "over" classname. The essence here is that :hover is the CSS equivalent of observing the "mouseover" and "mouseout" events. The draw back to our solution is that if Javascript is turned off, the sub-menus remain hidden from the user. NOTE: I am not a designer, so the purpose of this article is to merely illustrate the ability to apply hover-type functionality to any element on the page in IE and not showcase my ability to make things look nice. Another feature to mention is the init function and the Event.observe() call, which calls the init function after the window has finished loading the page. This is a must because we cannot apply the "mouseover" and "mouseout" event observations until the nodes have been created in the DOM. Best to leave this until the window has loaded. Both of the functions rely on the prototype.js library to retrieve the child nodes, iterate through the nodes, and attach events to the nodes. It is possible to do this without prototype or with another library, but I leave it up to the reader to translate this code to their library of choice.