Repaired version At left is an example of an expandible navigation menu built with jQuery, and based upon the behaviors of lists and links. It works perfectly in Firefox, but is quirky in IE6. The quirkiness of IE is based upon the browser's perception of the sensitive "hotspot" area of the mouse hover event. Firefox perceives the area as the entire div, while IE perceives it as only the text. I fixed the problem in IE by adding a gif background. If you remove this gif, the menu does not unfold properly in IE - the submenu does not open unless the text itself is hovered and it does not stay open. Try it on this page in both browsers, notice the position of the pointer, and then here.

NOTE: The top menu box slides open over top of the one below only if it is set to position:relative and z-index:2 in the css class definition. The bottom menu also has to be set to absolute position. The slightly different styling of the menu sets does not have an impact on the issue of the hover behavior. I could now create menu sets in a variety of "looks" as long as the underlying javascript behavior is the same.

This jquery section of my site is still in process. I will add more examples in time.

For Yahoo YUI examples, see the next section.