Drop down menu behind flash


One of the more common issues with embedding a flash object on your home page (or any page for that matter) is that if it is near the navigation and you have CSS drop-down menus, then you may find your drop-down menu getting lost behind the flash object. If you haven’t dealt with this before it can feel like a nightmare, but fortunately it’s a pretty easy fix.

The Problem: You have a CSS based drop-down menu in your navigation and a flash element near it the menus may get “hidden” behind the flash object.

The Solution: Set the z-index of the div holding the flash to 1 and the z-index of the div holding the nav to 2.

In the flash element:

Look for the flash <object> tag and add the following code:

<param name=”wmode” value=”transparent”>

You’ll want to insert this code right below the <param name=”quality” value=”high”> tag and include the code wmode=”transparent” in the flash <embed> tag .

  1. Hello sir!
    I am experiencing the exact problem you describe ONLY in Safari browser (all versions of IE, FF, and Chrome work great!). I have tried the z-index listing, the wmode set to transparent, etc., all with no change to the end result that our drop down menu goes behind the flash object. I believe all was done correctly.

    Your help would be very much appreciated!


Leave a Comment.