Видео мешает выпадающему?

Question

Я пытаюсь открыть раскрывающееся меню при наведении курсора на родительскую ссылку, и оно работает, за исключением того, что когда на странице есть видео, оно не работает ... Я не конечно почему. Я пытался поиграться с 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 -->

Answer 1

В дополнение к ответу btelles вам также нужно изменить событие mouseout для события mouseleave. Когда вы привязываете его, меню будет оставаться достаточно длинным, чтобы вы могли выбрать из него элемент.

Answer 2

Я столкнулся с этой проблемой в более ранней жизни. Если видео основано на 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>

Надеюсь, это поможет!