2009-11-18 2 views
0

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

Думаю, вам нужно будет использовать IFrame. – TheVillageIdiot

+0

thevillageidiot, вероятно, прав. то же самое происходит с элементами управления select, которые обсуждаются здесь: http://stackoverflow.com/questions/552326/ie-6-select-controlscombo-box-over-menu –

ответ

0

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

Надеется, что это помогает!

0

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

Смежные вопросы