CSS IE7 Z index issue

Will Yancey

Web site I am working on is having an issue in IE7 with Z index. When you hover over the top menu it goes behind the bottom menu. But only in IE7. Also when you hover over an item you can only go down a few selections before the hover over menu disappears. Any help?

Also I have seen on Google the position setting to be “position:relative” but that didn’t work…

You just need to set the li on hover to a higher z-index.


.menu li:hover{ z-index:99}

The hover disappears because ie7 falls through the gaps between the menu so add a background colour to the ul to maintain persistence.


.menu li:hover ul{background:#fff}

If you don’t want a background colour then use a the fake gif trick.


li:hover ul{background:url(fake.gif) no-repeat -1px -1px}

If you don’t want missing images errors in your server logs then use a 1px fully transparent gif.

Be careful with your global rules as you have defined many rules for the ul and lists that will affect all uls that you use throughout the site.

e.g.


ul li {
    display: block;
    position: relative;
    float: left;
}

It is unlikely that every list in your page will need to be floated and indeed that will ensure that IE6/6 never see any bullets as they get removed on floated lists.

Make sure you add an appropriate class or id to them.

Thank you so much. All of that worked and thanks for the tips.