Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

CSS Pulldown Menu Displays Behind An Element (or Picture) in IE7

Problems with css menu items hiding behind elements in Internet Explorer 7 (ie7)

Holy moly, this one was a doozy. I was just about to go live with a site that I've been working on when my client informed me that my nifty CSS Pulldown menu wasn't working properly in ie7. The "pulldown" portion of the menu was being obscured by other elements on the page. It works perfectly in the usual suspects (Safari, FireFox and even ie8). After a day and a half of searching and trying a multitude of tricks I finally stumbled across a very elegant and simple solution.

First of all let me give credit where credit is due. I did not come up with this solution, I found it here on Jonathan Stegall's blog. And a big thanks goes out to him for providing the answer. I won't go into a lot of the details, visit Jonthan's site for that, but I wanted to post the solution on my site mainly so I can reference it myself in the future.

The problem has to do with z-index. Apparently Internet Explorer 7 does not play nice with this CSS tag. What you need to do is just make sure that the parent element, that the navigation is placed in, has it's position set to relative and z-index set to something lower than your navigation (like 1 or 2). Here's an example.

HTML Code
<div id="wrapper">
    <div id="header">
        <h1>My Cool Site</h1>
        <ul id="nav">
            <li><a href="menu1.html">menu 1</a>
                <ul>
                    <li><a href="submenu1.html">sub-menu 1</a>
                </ul>
            </li>
            <li><a href="menu2.html">menu 2</a></li>
        </ul>
    </div>
    <div id="content">
        Blah blah to the blah...
    </div>
</div>

Your CSS might look something like this:

CSS Code
#wrapper {
   position: relative;
   display: block;
   width: 500px;
   height: auto;
   margin: 0 auto;
}
#header {
   position: relative;
   display: block;
   width: 500px;
   height: 100px;
}
#nav {
   position: absolute;
   bottom: 0;
   left: 0;
   list-style: none;
   margin: 0;
   padding: 0;
}
#nav li {
   position: absolute;
   display: block;
   width: 100px;
   height: 32px;
   float: left;
}
#nav li ul {
   display: none;
   width: 100px;
   height: 15px;
   position: absolute;
   top: 15px;
   left: 0;
   list-style: none;
   margin: 0;
   padding: 0;
}
#nav li:hover ul {
   display: block;
}

Granted this has been greatly simplified, but you should get the general idea. The :hover class triggers the ul nested inside the li to change it's display property to a block. The problem is that this works for everything except ie7 (and perhaps earlier). Also note that the :hover class doesn't work for ie6 and ie5. You have to use Javascript to handle that. There's plenty of articles on the web that show you how to do this.

So what's the solution you ask? Well it's simple, add a z-index property to the CSS #header rule like this:

Modified CSS Code
#wrapper { 
   position: relative; 
   display: block; 
   width: 500px; 
   height: auto; 
   margin: 0 auto;
}
#header { 
   position: relative;
   display: block;
   width: 500px;
   height: 100px;
   z-index: 2 /* <-- the big fix! */
}
#nav {
   position: absolute; 
   bottom: 0; 
   left: 0; 
   list-style: none; 
   margin: 0;
   padding: 0;
}
#nav li {
   position: absolute; 
   display: block; 
   width: 100px; 
   height: 32px; 
   float: left;
}
#nav li ul { 
   display: none; 
   width: 100px; 
   height: 15px; 
   position: absolute; 
   top: 15px; 
   left: 0; 
   list-style: none; 
   margin: 0; 
   padding: 0;
}
#nav li:hover ul { 
   display: block;
}

That's it. Simple right? Well, if you have any questions about this let me know. This one threw me for a loop.