Nav ul dropdown ie bug css???

i have a navbar with a mouseover dropdown li below. on my page the nav bar is above a swf file. in IE the dropdown appears behind the swf file. all other browsers it's fine. any ideas in laymens terms? html below. css below that. thanks in advance!
pj

html

[CODE]
<div id="menuwrapper">
<ul id="p7menubar">
<li><a href="index.html">Home</a></li>
<li><a class="trigger" href="wine.html">Portfolio</a>
<ul>
<li><a href="wine.html">Wine Design</a></li>
<li><a href="studies.html">Case Studies</a></li>

<li><a href="print.html">Print</a></li>
<li><a href="web.html">Web</a></li>
<li><a href="photography.html">Photography</a></li>
<li><a href="video.html">Video</a></li>

</ul>
</li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>


</ul>
<br class="clearit">
</div>
</div>

css below


#menuwrapper {

}

.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}

#p7menubar, #p7menubar ul {
padding: 0;
margin: 0;
list-style: none;
font-family: "Times New Roman", Times, serif;
}

#p7menubar a {
display: block;
text-decoration: none;
padding: 3px 28px;
border-right: 1px dotted #ffffff;
font-size: 0.85em;
color: #ffffff;
}

#p7menubar a.trigger {
padding: 5px 16px 5px 10px;
background-image: url(images/p7PM_dark_south.gif);
background-repeat: no-repeat;
background-position: right center;
}

#p7menubar li {
float: left;
width: 9em;
}

#p7menubar li ul, #p7menubar ul li {
width: 12em;
}

#p7menubar ul li a {
color: #ffffff;
border-right: 0;
padding: 3px 12px 3px 16px;
}

#p7menubar li ul {
position: absolute;
display: none;
background-color: #FFFFFF;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
background-image: url(images/p7exp_mgrad.jpg);
background-repeat: repeat-x;
}

#p7menubar li:hover a, #p7menubar a:focus,
#p7menubar a:active, #p7menubar li.p7hvr a {
color: #3c3c3c;
background-color: #CCCCCC;
}

#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
display: block;
}

#p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {
color: #3c3c3c;
background-color: transparent;
}

#p7menubar ul a:hover {
background-color: #606060!important;
color: #FFFFFF!important;
}

#p7menubar li {width: auto;}

[ENDCODE]

Could you please post a link to your page?

the site is www.peerjohnson.com

thanks in advance.

You'd need to add wmode transparency to your swf file, see kb2.adobe.com/cps/142/tn_14201.html. You may just add it using addParam() of your swfobject.

thank you for your help. i tried your suggestion but was unable to implement, couldn't get correct syntax, my fault.

i had someone work on it, they fixed it & it looks like what they did was what you suggested may have done something to flash file as well, can't tell;

added html


so.addParam("wmode", "transparent");

I think they added the following too #menuwrapper {/*p7exp.css (line 7)*/
position:relative;
z-index:2;
}