Dropdown menu hides behind other elements in IE

Ok originale solution here - Swiss credit website. This works but uses a complicated z-index solution.Here is very simple and improved solution here - Jeyjoo stock image galleryThis works in IE6+, firefox, opera, safari and chrome

Solution

The HTML

<div id="container_page" class="container_page">  <div id="container_header" class="container_header">    NAV BAR GOES HERE  </div>  <div id="container_body" class="container_body">    ...body text...  </div></div>

The CSS

#container_page #container_header {position:relative;z-index:2;}#container_page #container_body {position:relative;}

why it works

You have to tell IE how the two divs relate to one another.

(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.

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.