Jump to content
Sign in to follow this  
mboehler3

Positioning An Embedded Video Behind Nav Menu

Recommended Posts

I have a nav menu that uses dropdowns... here's an image of how the drop-down works:positionright.gifBut 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:positionwrong.gifTo 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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...