IE 7 z-index bug – drop-down menus

If you've struggled to figure out why your drop down menus are showing behind other content, you may have come across the IE 7 z-index bug.

Without duplicating the content on the many articles that discuss this issue, here's a quick way to resolve it with a little jQuery:

jQuery (to be run in your document.ready or document.load event)

$("#menu-wrapper ul li").parents().each(function() {
    var p = $(this);
    var pos = p.css("position");
        if(pos == "relative" || pos == "absolute" || pos == "fixed") {
        p.hover(function() {
                $(this).addClass("on-top");
            },
            function() {
                $(this).removeClass("on-top");
            });
    }
});

css

.on-top { z-index: 10000; }