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() {
            function() {


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


Leave a Reply

Your email address will not be published. Required fields are marked *