Jquery 视频干扰下拉菜单？

当我将鼠标悬停在父链接上时，我试图打开一个下拉菜单，它是有效的，除了当页面上有视频时，它似乎不起作用。。。我不知道为什么。我尝试过使用z索引，但似乎没有任何效果。子菜单项只是有点忽隐忽现，但整个菜单并没有保持打开状态。。。下面是jquery代码、CSS，然后是html标记。。。不知道我做错了什么

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)
});

以下是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 }

以下是HTML标记：

<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 -->

---

我在早年遇到过这个问题。如果这段视频是基于Flash的，那么你就必须做一些诡计，让内容显示在上面

特别是，Flash内容需要具有以下参数设置：

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

因此，完整条目可能如下所示：

<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>

---

希望这有帮助

除了btelles响应之外，还需要更改事件的mouseout事件。当您绑定到它时，菜单将保留足够长的时间，允许您从中选择项目。

我认为您需要使用IFrame。VillageDiot可能是正确的。这里讨论的选择控件也会发生同样的情况：