Demonstration of IE7 Hover Glitch

The top menu above is a DHTML menu that relies on the hover pseudo class to turn on and off sub-menus. This menu works correctly in Firefox, Opera & Safari, and validates to W3C HTML4.01 Strict & CSS specifications. However, with IE7, which is supposed to fully support the "hover" pseudo-class ghost menu shells get left behind.

In IE7 if one expands out dropdown menus, then drills down into submenus and then skips to the next drop down menu, sometimes IE7 will display "ghost" sub-menus that are expanded out, but contain no menu items. Moving the cursor up and down the menu closes the ghost menus and allows the menu to work correctly for a while. Rapidly moving the cursor from drop down menu to drop down menu can exasperate the problem. Basically it appears that IE7 is not always returning sub-menu objects back to "display:none" properly after setting them to "display:block" as a result of the "hover" pseudo-class.

All top menu related style instructions are in the files /css/TopMenu.css and /css/IE7.css. The IE7.css file is used to resolve some lingering rendering issues between IE7 and other modern browsers (e.g. Firefox, Opera & Safari).

Although there are "onmouseover" and "onmouseout" events for some menu objects, these functions only do something in IE5 and IE6 to emulate the hover pseudo class in those browsers as they do not properly support hover.