Question

I think I’ve ran into a z-index stacking issue in ie. The drop down menu displays in firefox but not in any version of ie (see the following js fiddle http://jsfiddle.net/MdUKd/15/). I tried to solve this by adding a higher z-index to every parent element that has position relative, but it’s still not working.

Any help would be much appreciated.

Edit: Code included here and javascript removed from js fiddle for clarity (dropdowns should still work without js).

HTML:

<div id="nav" style="z-index: 5">
<div id="nav-inner">
    <ul class="main-menu dropdown" style="z-index: 4">
        <li class="menuItem2 parent" style="z-index: 3">
            <a href="#">VISIT</a>
            <ul class="nccUlMenuSub1" style="z-index: 2">
                <li class="menuItem1 first"><a href="#">Tours</a></li>
                <li class="menuItem2"><a href="#">Directions</a></li>         
            </ul>
        </li>
    </ul>
</div>
</div>

CSS:

#nav
{
    background: #911201;
    background: linear-gradient(top,#911201 0,#780202 100%);
    background: -moz-linear-gradient(top,#911201 0,#780202 100%);
    background: -ms-linear-gradient(top,#911201 0,#780202 100%);
    background: -o-linear-gradient(top,#911201 0,#780202 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#911201),color-stop(100%,#780202));
    background: -webkit-linear-gradient(top,#911201 0,#780202 100%);
    filter:     progid:DXImageTransform.Microsoft.gradient(startColorstr='#911201',endColorstr='#780202',GradientType=0);
    height: 40px;
    position: relative;
    z-index: 4;
}
#nav ul
{
    list-style: none;
    list-style-image: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}
#nav ul li
{
    border: 1px solid #17203D;
    border-right: 0;
    float: left;
    height: 38px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 126px;
    zoom: 1;
}
#nav ul li.hover,#nav ul li:hover
{
    position: relative;
}
#nav ul a
{
    color: #FFF;
    display: block;
    font-size: 16px;
    line-height: 38px;
    text-align: center;
    text-decoration: none;
}
#nav ul li.last
{
    border-right: 1px solid #17203D;
    width: 129px;
}
#nav ul a:hover,#nav ul a.selected
{
    background: #17203D;
    color: #E3E1D5;
}
#nav ul ul
{
    left: -1px;
    position: absolute;
    top: 38px;
    visibility: hidden;
}
#nav ul .last.parent ul
{
    left: auto;
    right: -1px!important;
}
#nav ul ul li,#nav ul ul li.last
{
    border: 0;
    display: inline;
    float: none;
    font-weight: normal;
    width: 175px;
}
#nav ul ul li a
{
    background: #17203D;
    color: #FFF;
    display: block;
}
#nav ul ul li a:hover,#nav ul ul li a.selected
{
    background: #780202;
    color: #FFF;
}
#nav ul ul li a
{
    border-right: none;
    display: inline-block;
    width: 100%;
}
#nav ul ul ul
{
    left: 100%;
    top: 0;
}
#nav ul li:hover>ul
{
    visibility: visible;
}

Answer 1

You still have a lot of code posted in the question. It helps if you land in this situation to start stripping seemingly irrelevant CSS rules to make the problem as “pure” as possible. Start with border colors, margins of -1px, etc, and work your way to more relevant rules.

When I was doing that to the code posted, I found the problem almost directly:

filter:     progid:DXImageTransform.Microsoft.gradient(startColorstr='#911201',endColorstr='#780202',GradientType=0);

Remove that line, and things start to work in IE.

At first this surprised me a bit, but it make sense: the gradient is the most “IE-specific” thing in there, explaining why only IE had this problem.

Apparently the gradient filter doesn’t play so nice with z-index, there’s probably quite a few seperate SO questions on that topic.