Positioning An Embedded Video Behind Nav Menu

[mboehler3]

I have a nav menu that uses dropdowns... here's an image of how the drop-down works:But there are pages of my website that have an embedded video on them, and the video is directly underneath a dropdown menu. The problem is, the dropdown menu goes behind the video, like this:To me, this screams out z-index, but I've tried applying a negative z-index to the video and a positive z-index to the <ul> in the nav menu, and it didn't solve my problem.Here is the code for the nav menu:

<div id="navmenu" class="navmenu960"><ul id="menunav"><li><a href="/product/payroll/" title="Payroll" class="payroll" ><strong>Payroll</strong></a>	<ul>	<li class="top"><div class="navpaddingtop"><a href="/product/payroll/" title="Online Payroll Advantage" >Online Payroll Advantage</a></div></li>	<li><a href="/product/payroll/what-you-get.asp" class="bckgroundarrow" title="Payroll Features" ><div class="navpadding">Payroll Features</div></a>		<ul>		<li class="top"><div class="flyoutpaddingtop"><a href="/product/payroll/iphone-app.asp" title="iPhone® Payroll App" >iPhone<sup><small>®</sup></small> Payroll App</a></div></li>		<li><a href="/product/payroll/software-integration.asp" class="bckground" title="Accounting Integration" ><div class="flyoutpadding">Accounting Integration</div></a></li>		<li><a href="/product/payroll/1-clickpayroll.asp" class="bckground" title="1-Click Technology" ><div class="flyoutpadding">1-Click™ Technology</div></a></li>		<li><a href="/product/payroll/mobile-applications.asp" class="bckground" title="Mobile Applications" ><div class="flyoutpadding">Mobile Ready</div></a></li>		<li class="bottom"><div class="flyoutpaddingbottom"><a href="/product/payroll/what-you-get.asp" title="All Our Features" >View All Our Features</a></div></li>		</ul>	</li>	<li><a href="/quote/instant_price_quote.asp" class="bckground" title="Payroll Pricing" ><div class="navpadding">Payroll Pricing</div></a></li>	<li><a href="/product/payroll/payroll-services.asp" class="bckground" title="Payroll Services" ><div class="navpadding">Compare Payroll Services</div></a></li>	<li><a href="/guidedtour/" class="bckground" title="SurePayroll Guided Tour" ><div class="navpadding">SurePayroll Guided Tour</div></a></li>	<li class="bottom"><div class="navpaddingbottom"><a href="/enroll/CreateAccount.asp?" title="New Payroll Enrollment" >New Payroll Enrollment</a></div></li>	</ul></li><li><a href="/product/" title="Products & Services" ><strong>Products & Services</strong></a>	<ul>	<li class="top"><div class="navpaddingtop"><a href="/product/payroll/" title="Payroll">Payroll</a></div></li>	<li class="bottom"><div class="navpaddingbottom"><a href="/product/" title="Integrated Services" >Integrated Services</a></div></li>	</ul></li><li><a href="/surechoice/accountant_access.asp" title="Accountant Center" ><strong>Accountant Center</strong></a></li><li><a href="/spsite/resources/" title="Small Business Resources" ><strong>Small Business Resources</strong></a></li><li><a href="/scorecard/" title="SurePayroll Scorecard" ><strong>SurePayroll Scorecard</strong></a></li><li class="aboutus"><a href="/spsite/company/"  title="About Us" class="aboutus"><strong>About Us</strong></a>	<ul>	<li class="top"><div class="navpaddingtop"><a href="/spsite/company/meet-the-team.asp" title="Meet Our Team">Meet Our Team</a></div></li>	<li><a href="/spsite/press/" title="Media Center" class="bckground"><div class="navpadding">Media Center</div></a></li>	<li><a href="/businesspartners/"  title="Partner Programs" class="bckground"><div class="navpadding">Partner Programs</div></a></li>	<li><a href="/securitycenter/bcrhware/"  title="Security and Privacy" class="bckground"><div class="navpadding">Security</div></a></li>	<li class="bottom"><div class="navpaddingbottom"><a href="/contactus/" title="Contact Us" >Contact Us</a></div></li>	</ul></li></ul></div>

The code for the video is a simple <embed> call out.Can somebody please help me fix this problem? Any help is greatly appreciated, thanks!

[Ingolme]

You may need to add <param name="wmode" value="transparent"> to the object parameters. I've heard that solves the probem but I'm not that sure, really.<object> and <iframe> elements always force themselves in front of all the rest of the content.

[ProblemHelpPlease]

Be careful when using a negative z-index, not all browsers are compatible with negative numbers, try using positive numbers for all z-index.

[mboehler3]

You may need to add <param name="wmode" value="transparent"> to the object parameters. I've heard that solves the probem but I'm not that sure, really.<object> and <iframe> elements always force themselves in front of all the rest of the content.

You're correct - I had to add wmode="transparent" to the embed tag, and that solved it.thanks!