IE 7 CSS problem with detecting mouse over on div

Question

I have a div inside an li as part of a top navigation for a website.

I'm having trouble with IE 7 having "holes" in the box such that the drop down disappears when the user is still on the drop down.

I started with a pure CSS solution (li:hover) and that works awesome in all browsers except IE 7. So I've now added a jQuery/javascript solution to detect when the mouse enters and exits the nav li and then add a class to show the drop down. It works better, but if the mouse is not over an image, p, h3, or a tag then it doesn't think I'm over the div that is the drop down. Very frustrating.

I can post some test code, but the issue can be viewed here: http://davincidays.org/

Anyone have any ideas? I've been working on this for waaaay too long already and need some fresh things to try.

Answer 1

If you're not using a strict doctype it has been known to cause issues with the :hover pseudo class in IE7. Try changing it to 1.0 strict to keep IE from going into quirks mode and see if that does anything for you.

I've spent many wasted hours on this same issue :)

Answer 2

OK, I found another similar issue on Stack Overflow: http://stackoverflow.com/questions/1443850/ie7-hover-on-div-being-lost-when-you-touch-a-child-element-of-that-div

The background color was the solution. I added a BG color to my internal elements, and voila! it worked.