IE7 z-Index Issue in jQuery Megamenu

Question

I am coding this MegaMenu using jQuery. Here's the URL: http://h1.servy.net/sgtlmm/

It's working fine in all browsers but only in IE7 when hovered over menu items like "Latest" or "Personal" you can see that the megadropdown is showing over the current item. For the rest of the item it's fine. Only the current menu item and items before that are causing the issue.

The megadropdown with a gray border is showing up over the latest menu item on IE7. That's the problem :(

I have tried position:relative, higher zindex in parent elements but none seem to work. Need your help, please! Many thanks in advance.

I also have another issue with positioning the megadropdown for inner items like "Small & medium Enterprise". Can you please help me with that too? Thanks.

Answer 1

It doesn't seem to work right in Chrome either. The z-index of of links are changing, not the z-index of the respective divs.