I have an interactive flash movie(.swf), which demo's the workings of a company I'm creating a website for, that blocks some drop down menu's from behind displayed:

 

 

This problem has been bugging me for ages and I'm at my wits end now.

 

Here the html code for the menu and object:

 

<div class="homenav2">

<ul>

<li><a href="index.html">Home </a>

<ul>

<li><a href="about.html">About Us</a></li>

<li><a href="mission.html">Our Mission</a></li>

<li><a href="lean.html">What is Lean?</a></li>

<li><a href="team.html">Meet the Team</a></li>

<li><a href="partners.html">Partners</a></li>

<li><a href="clients.html">Clients</a></li>

</ul>

</li>

</ul>

</div>

 

<p class="center">

<object classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=8,5,0,0" width="800" height="600" >

<param name="src" value="flash/BITP.dcr" />

<param name="wmode" value="transparent" />

<embed wmode="transparent" src="flash/BITP.dcr" pluginspage="http://www.macromedia.com/shockwave/download/" width="800" height="600" ></embed></object>

</p>

 

This is the css for the drop downs:

 

/*Home*/

 

.homenav2 ul {list-style-type:none;}

.homenav2 ul li {float:left; position:relative; border-right:solid 1px rgb(175,175,175);}

.homenav2 ul li ul {display:none; border:none;}

.homenav2 ul li ul {margin-left:-30px; padding:0 30px 30px 30px; background: url(img/bg_head_bottom_nav_hover.gif) top center;} /*Sticky hover zones*/

.homenav2 ul li a {float:left; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color:#869998;}

.homenav2 ul li:hover {width:auto;}

.homenav2 table {position:absolute; z-index:999; top:0; left:0; border-collapse:collapse;}

 

/*Non-IE6*/

.homenav2 ul li:hover a {background-color:#add8e6; text-decoration:none;} /*Color main cells hovering mode*/

.homenav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:998; top:3.0em; margin-top:0.1em; left:0;}

.homenav2 ul li:hover ul li ul {display: none;}

.homenav2 ul li:hover ul li a {display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:#add8e6; font-weight:normal; color:#869998;} /*Color subcells normal mode*/

.homenav2 ul li:hover ul li a:hover {background-color:#ffffff; text-decoration:none;} /*Color subcells hovering mode*/

 

/*IE6*/

.homenav2 ul li a:hover {background-color:#add8e6; text-decoration:none;} /*Color main cells hovering mode*/

.homenav2 ul li a:hover ul {display:block; position:absolute;z-index: 998; top:3.1em; t\op:3.0em; left:0; marg\in-top:0.1em;}

.homenav2 ul li a:hover ul li a {display:block; width:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:#add8e6; font-weight:normal; color:#869998;} /*Color subcells normal mode*/

.homenav2 ul li a:hover ul li a ul {visibility:hidden; height:0px; width:0px; position:absolute; z-index: 997;}

.homenav2 ul li a:hover ul li a:hover {background-color:#ffffff; text-decoration:none;} /*Color subcells hovering mode*/

 

Please note that the other drop down menus have the same css but just different colours.

Here's a link to Adobe's instructions for publishing a flash file with a transparent background.

 

http://kb2.adobe.com/cps/142/tn_14201.html

 

If you've got access to the original fla file it might be worth double checking your settings. I had this same problem last year and following those instructions solved it for me.

 

Hope this helps you out.

Making the flash transparent may be one way, but the reverse is to make the menu z-index: 5; and it must also have position: relative:-

.homenav2

{ position: relative; z-index: 5;

other styles

}

 

It works with Javascript fading images and I've been told that it works with Flash but haven't tested it. It may be quicker to test this solution than to edit the flash.

 

Edit: The answer is here:-

http://css-tricks.com/forums/viewtopic.php?f=2&t=3759

 

it seems that my solution of a z-index is only half the solution; you have to make the object tag with the swf file opaque; but it does mean that you don't have to edit the flash file, only the css, which, in the end, is much the same as dcman007's solution, use <param name="wmode" value="transparent"> (or opaque) with a z-index and position: relative for the menu div.

 

Edit 2: I've now tested using my position: relative and a z-index (which I had already for my javascript image) swapped the javascript image for the object and nested embed tag code with a swf file which had the transparent parameters for the object embed tags mentioned in dcman007's Adobe link above and it worked.