jQuery Drop down disappears when hovering over text (IE6/7 only)

Question

EDIT: I've voted to close this as I was never able to determine the exact cause of the issue and the test links below no longer exhibit the issue since changing to use the Superfish menu.

I'm using this simple jQuery drop down menu on a small site but I'm having an issue where the menu disappears only when the mouse hovers over text in IE6 and IE7. Everything works as expected in FF 3.5 and IE8.

The site is located at http://www.fencescapedesign.com/dev/Services.aspx

The issue appears when you hover over the "Portfolio" tab and move the mouse down over the 2nd/3rd sub menu item. In IE6 and IE7 the menu instantly disappears, but only when over text (Services We Provide, or any links below). It's possible to bring up the drop down and slowly mouse around the right edge and not have it disappear until you move the mouse left and over text.

I've tried various changes to the positioning and z-index of the elements and looking at similar SO questions but to no avail. As I'm no CSS expert it's entirely possible that some other background element or positioning that I messed up is causing the issue.

The CSS in question is located at http://www.fencescapedesign.com/Styles/Site.css near line 200.

Answer 1

Note that the menu disappears when the cursor moves over top of the "Services we provide" element. I'd try a few things:

• Add position:relative to the container of the "menuLinks" item to make IE behave nicely. This is the most likely culprit.

If that doesn't work (and really even if it does), you should also:

• Specify a top and left property for the menu links ul
• Add a proper z-index to the menu links ul. Since z-index only applies to positioned elements, be sure to leave it positioned as you have it now
• Remove the z-index on the "bodyText" element. You want the menu over top of the body text, not the other way around.

Answer 2

I know it's not an answer to your question, but perhaps a workable alternative that may actually end up saving you time. Try implementing the jQuery plugin Superfish css as a test since it's a true css drop-down menu on it's own.

I use it all the time. Hope it helps you.