Field Notes Inside an Integrated Communications Agency

If you've been into the development game for any time at all, chances are you've encountered the famed Suckerfish dropdown navigation system at some point. I have successfully employed this chunk-o-brilliance - and it's successor, Son of Suckerfish - more than a few times. I recently had cause to implement dropdown navigation over Flash content, and was dismayed to see Safari comPLETEly freak out and throw a tantrum, causing my dropdown menu items to flicker in and out of existence. After much poking about, I decided that Safari must just not handle z-index as well as other browsers. I set up a little javascript function to detect the user's browser, and point to a separate CSS file if Safari was encountered.

It was only after pausing for a moment of silent reflection for all those users who would never see my handy navigation that I thought to try to find a similar case online. I started at the top of my bookmarks. Four sites in, and right there, at the top of Adobe.com , was my answer.

In order to make all other browsers behave when rendering your dropdown nav over Flash content, all you have to do is a) make use of the wmode tag for your Flash div, setting it to either transparent or opaque, and b) assign a z-index value of 2 to the block-level element containing your dropdown menu. Safari balks. To make it behave, you have to burrow down into your nav CSS and add z-index tags to every nested element, including the links:

#navdiv {
    z-index:2;
} 

#navdiv ul {
    z-index:3;
}

#navdiv ul li {
    z-index:4;
}

#navdiv ul li ul {
    z-index:5;
}

#navdiv ul li ul li {
    z-index:6;
}

#navdiv a {
    z-index:7;
}

Presto! Change-o! Safari's nasty flicker is tamed. Lesson to be learned here: take advantage of Firebug , and don't worry about reinventing the wheel. I was able to find a working example of what I wanted, and Firebug gave me the behind-the-curtain insight needed to make it happen. If you are not currently in the know on the incredible development resource that is Firebug, I implore you - drop everything and go get it!