Question

I’m having trouble with z-index in IE 7. The problem is that the menu items are in 2 rows. If any of first row item has sub-menu, the IE7 won’t let you hover it. The problem is caused by IE7 only.

Here’s my code:

<div id="wrapper">

    <div id="main-nav">
        <ul class="main-menu" id="menu-header-menu">
            <li class="menu-item"><a href="#">item 1</a>
                <ul class="sub-menu">
                    <li class="menu-item"><a href="#"> sub item</a>
                        <ul class="sub-menu">
                            <li class="menu-item"><a href="#">sub sub item</a></li>
                            <li class="menu-item"><a href="#">sub sub item</a></li>
                        </ul>
                    </li>
                </ul>
            </li>

            <li class="menu-item"><a href="#">item 2</a></li>
            <li class="menu-item"><a href="#">item 3</a></li>
            <li class="menu-item"><a href="#"> test item</a>
                    <ul class="sub-menu">
                        <li class="menu-item"><a href="#">sub sub item</a></li>
                        <li class="menu-item"><a href="#">sub sub item</a></li>
                    </ul>
            </li>
        </ul>
    </div>  
</div>

CSS:

#wrapper {
    width:250px;
    margin:0 auto;

}
#main-nav { 
    background-color:orange;
    padding: 0 10px;    
    clear: both;
    display: block;
    float: left;
    width: 100%;    
}

#main-nav ul {  
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
}
#main-nav li {
    float: left;
    position: relative; 
}

#main-nav a {
    color:#737373;
    display: block;
    line-height: 2.333em;
    padding: 0 1.2125em;
    text-decoration: none;
}
#main-nav ul ul {   
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 2.333em;
    left: 0;
    width: 188px;
    z-index: 999;
}
#main-nav ul ul ul {
    left: 100%;
    top: 0;
}
#main-nav ul ul a {
    background: yellow;

    height: auto;
    line-height: 1.4em;
    padding: 10px 10px;
    width: 168px;
}

#main-nav li:hover > a,
#main-nav a:focus {
    color: #373737;
}

#main-nav ul li:hover > ul {
    display: block;
}

Here you can see the problem. When you hover on the item 1, it does not let me hover its sub item which has yellow background.

Answer 1

Easy fix. Add this to the bottom of your css code:

#main-nav ul li:hover {z-index:9999;}

The problem is that your element needed a higher z-index upon hovering, not before.

Here’s a live link to a demo I uploaded. Works on both ie7 and ff/chr/saf:

http://sotkra.com/stackoverflow/ie7zindex/index.html

I nonetheless suggest you simplify your code, it’s too clunky. There is a tiny bug where once you hover your 3rd layer menu, exit and then re-enter, the yellow background will be there. Should be fixed with a proper cleanup of your html/css

Cheers

G