Suckerfish Dropdowns and Blueprint CSS
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;">

August 30th, 2008 at 4:56 pm
Hey thanks for the tip — I was wondering why Suckerfish gets screwy with Blueprint….