4 Years
Discussion Span
Last Post by dfjosh

I can't find your JS code the handles the drop down menus, but best guess it you're applying the hover event on the link tag which does not extend to the bottom of the menu background so there is a small gap between the menu header and the sub menu which causes the menu to disapear when the mouse crosses it as it's no longer hovering over the header or submenu. What I usually do is when the mouseout is detected I use a setTimeOut for 1 second which prevents unwanted closing in the event the user accidentally leaves the sub menu area briefly.


cant always think of .., but a possible explanation of why ..

IE builds the box model for nested elements differently to other browsers.
padding margins etc is inside each element on ie, outside the element on more standards compliant browsers
. . so . . .
when IE creates an element there is a bare area at the border, not part of any element, not present in other browsers, just big enough to cause the :hover effect to fail.

you may be able to repair it by altering padding and/or margin in the css for the nested lists


GliderPilot, I should have mentioned the drop downs are pure CSS. You can find the relavent CSS below the /* Navigation */ comment in style.css


almostbob, I didn't know that about IE but I went back and checked the layout of each element in the nav bar and nothing (with exception of the outer-most containing nav element) has top or bottom margin or padding.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.