Dropdown menu hides behind other elements in IE

Question

I have installed the Boldy theme from site5 on one of my projects and have run into one major problem.

When browsing in internet explorer (8 or lower), the top dropdown menu gets displayed behind some other elements (main content slider, H1's etc.). I've tried everything from changing all the z-index's to fixed positions, with no luck.

You can view the problem by visiting site5's Boldy demo page http://wordpress.site5.net/boldy/ and hovering over the top menu's blog tab in IE.

I have asked site5 to look into it, they are aware of the problem, but have failed to find any solutions.

Answer 1

(not my script) Pretty sure i may have found the answer to this on here, but i cant find it. Either way, this worked great for me...

$(function() {
var zIndexNumber = 1000;
$('ul').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
});
});

just make sure your css includes position and z-index so the script can access the values.

kudos to whomever came up with this - saved me a whole lot of trouble.

Answer 2

If I'm not mistaken, IE is not properly inheriting the z-index from the top-nav for the children li items in the menu. That is why the Photos with a z-index of 60 are covering it up. You can do two things here.

1. Eliminate the photo z-index.
2. Directly specify a z-index of 100 for the sub list, not just the top-nav list.