z-index bug in IE

[alinart]

The dropdowns for my tabbed navigation are appearing behind the flash animation on yogasports.biz (http://yogasports.biz) when you use IE. It works fine everywhere else.

What can I do to fix it?

This is the coding for my navigation currently
<div id="navigation" class="column span-15">
<ul id="MenuBar1" class="MenuBarHorizontal">

<li><a href="#" class="MenuBarItemSubmenu">Women</a>
<ul>
<li><a href="women_sleeve.html">Shortsleeve &amp; Sleeveless</a></li>
<li><a href="women_longsleeve.html">Longsleeve</a></li>
<li><a href="women_outerwear.html">Outerwear</a></li>
<li><a href="women_bottoms.html">Bottoms</a></li>
<li><a href="women_intimates.html">Intimates</a></li>

</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Men</a>

<ul>
<li><a href="men_sleeve.html">Shortsleeve &amp; Sleeveless</a></li>
<li><a href="men_longsleeve.html">Longsleeve</a></li>

<li><a href="men_outerwear.html">Outerwear</a></li>
<li><a href="men_bottoms.html">Bottoms</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Accessories</a>

<ul>
<li><a href="bags.html">Bags</a></li>

<li><a href="headbands.html">Headbands</a></li>
<li><a href="yoga_mats.html">Yoga Mats</a></li>
<li><a href="zafus.html">Zafus</a></li>
<li><a href="yoga_dvd.html">Yoga DVD and CD</a></li>
</ul>

<li><a href="yogasize.html">Weightloss</a></li>

<li><a href="green.html">yogasports is <font color="#7CC034">Green</font> <img src="/images/rec.png" border="0" height="15"/> </a></li>
</ul>


</div>

My CSS file for the menu is located at http://yogasports.biz/SpryAssets/SpryMenuBarHorizontal.css

[jscheuer1]

Looks equally poor in all browsers to me. It's nothing to do with z-index. You need wmode transparent for your Flash object/embed tag (additions highlighted):


<object width="635" height="435">
<param name="movie" value="intro.swf">
<param name="wmode" value="transparent">
<embed src="intro.swf" width="635" height="435" wmode="transparent">
</embed>
</object>

[alinart]

thank you!!!