Why do the nested li's in the Navigation ribbon disappear before I can get my mouse to them in IE. It only doesn't work in IE (9 and 8 are the ones I've tested). Here is the site: http://www.seventhheavenvintage.com

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.