jQuery - Video interferes with dropdown?

Question

I'm trying to get a dropdown menu to open when I hover over the parent link, and it works, except that when there's a video on the page, it doesn't seem to work... I'm not sure why. I've tried playing around with the z-indexes, but nothing seems to work. The submenu items just kind of blink in and out, but the whole menu doesn't stay open... Below is the jquery code, the css, and then the html markup... Not sure what I'm doing wrong...

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;



function plinks_open()
{  plinks_canceltimer();
  plinks_close();
  ddmenuitem = $j(this).find('ul').css('visibility', 'visible');}

function plinks_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function plinks_timer()
{  closetimer = window.setTimeout(plinks_close, timeout);}

function plinks_canceltimer()
{  if(closetimer)
    {  window.clearTimeout(closetimer);
      closetimer = null;}
}
$j('document').ready(function() 
{   
    $j('#plinks > li').bind('mouseover', plinks_open)
    $j('#plinks > li').bind('mouseout',  plinks_timer)
});

Here's the css:

plinks

{ margin: 0; padding: 0 background: #fff; }

#plinks li
{ float: left;
 list-style: none;
 background: #fff;
}

#plinks li a
{ display: block;
 background: #fff;
 text-decoration: none;
 white-space: nowrap
}

#plinks li a:hover
{ background: #fff}

 #plinks li ul
 { margin: 0;
  padding: 0;
  text-transform:lowercase;
  position: absolute;
  visibility: hidden;
  background: #fff;
  width: 400px;
  text-align:left;
  font-size: 14px;
  z-index: 9999;
 }

 #plinks li ul li
 { float: none;
  display: inline;
  text-indent:5px;
 }


 #plinks li ul li a:hover
 { background: #fff }

Here's the html markup:

<div id="primary-links">
    <ul id="plinks">
     <li><a href="/blog">home</a></li>
     <li><a href="/">portfolio</a></li>
     <li><a href="/blog/?page_id=2">about</a></li>
     <li><a href="/blog/?page_id=215">license</a></li>
     <li><a href="/blog/?page_id=217">links</a></li>
     <li><a href="/blog/categories.php">categories</a>
      <ul style="height:200px; display: block; background-color: #fff">
       <li>Sublink 1</li>
       <li>Sublink 2</li>
       <li>Sublink 3</li>
  </ul>
     </li>
     <li><a href="/blog/?page_id=356">archives</a></li>
     <li class="last"><a href="/blog/?page_id=219">connect</a></li>
    </ul>
</div><!-- /primary-links -->

Answer 1

I encountered this problem in an earlier life. If the video is Flash-based, then you'll have to do some trickery to get stuff to show up on top of it.

In particular, the Flash content needs to have the following parameter setting:

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

So the full entry might look like this:

<object classid="..." width="100" height="200">
    <param name="movie" value="test.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />   <-- add this line.
    <embed  src="..."></embed>
</object>

Hope this helps!

Answer 2

In addition to btelles response, you'll also need to change the mouseout event for a mouseleave event. When you bind to it, the menu will stay long enough to allow you to select an item from it.