If you have a Flash object (like a youtube video) on the same page as a CSS drop-down menu, you may notice that the menu drops down behind the Video. This can be really annoying, but let me explain why this is.
Essentially, this happens because of the way Flash works - flash just has to be the center of attention. Here's how you can work around this issue:
- Go to the code for your CSS menu, and in the first line, insert this code snippet: style="z-index: 599". Your first line of code will look like this: <ul class="menu-menu" style="z-index: 599" >
- Find the object tag for your Flash code and add this parameter: <param name="wmode" value="transparent">
- Add the following parameter to the embed tag: wmode="transparent". Your Flash code will now look something like this:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=5,0,0,0"
ID=Untitled WIDTH=120 HEIGHT=100>
<PARAM NAME=movie VALUE="Untitled.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=loop VALUE=false>
<PARAM NAME=wmode VALUE=transparent>
<EMBED src="/Untitled.swf" loop=false quality=high
WIDTH=120 HEIGHT=100 TYPE="application/x-shockwave-flash" wmode="transparent"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
After taking these steps, reupload your work, and your page should display correctly.
