I’m a big fan of the Son of Suckerfish CSS dropdown menus at HTML Dog - executed entirely using CSS with just a touch of JavaScript to give a little extra help to certain browsers out there. Lately, we’ve also been making use of the Blueprint CSS framework on a few projects and I ran into an issue when combining the two. The dropdown menus were appearing behind content when viewed in Internet Explorer.

By default, Blueprint has a stylesheet for IE that adds a position: relative declaration to certain classes. Took me a little while to track this down and the solution is pretty simple: add a z-index property to the nearest positioned ancestor of the dropdown navigation, and set the value to something greater than the z-index of the content (e.g. 100). Voilà! You’re back up and running.

In short, I changed the first line of this:

<div class="column span-42 pull-10 last">
  <ul id="nav">
    <li><a href="#">COMPANY</a>
      <ul>
        <li><a href="/ourstory">OUR STORY</a></li>
        <li><a href="/executivemanagement">EXECUTIVE MANAGEMENT</a></li>
        <li><a href="/news">LATEST NEWS</a></li>
      </ul>
    </li>
  </ul><!-- end #nav -->
</div>

to this:

<div class="column span-42 pull-10 last" style="z-index: 100;">