JQuery hover + position absolute = Проблемы в IE

Question

Я создаю выпадающее меню, и он отлично работает во всех современных браузерах, но я не уверен, что он не работает в IE, когда я пытаюсь выбрать подэлементы подменю , он исчезает.

Это страница: http://XXX/

и это код JS

$("nav li").hover(function(){ 
    $(".subnavi-wrapper", $(this)).show(); 
}, function(){ 
    $(".subnavi-wrapper", $(this)).hide(); 
}); 

EDIT: Видимо это маржа в верхней части выпадающего списка, который, кажется, чтобы активировать «MouseOut» в IE! По-видимому, jQuery плохо обнаруживает область предметов с абсолютной позицией! :(

Answer 1

Это все, потому что блок «subnavi-wrapper» в элементе Li. Вы должны удалить DIV и попробовать сделать это, только используя элемент Ul. Я сделал что-то, как это здесь: http://www.muzykakoncerty.pl

здесь, что-то вроде этого:

$('#menu > ul > li').each(function() { 
    if($('ul', this).length > 0) { 
     $(this).hover(
      function() { 
       $('ul', this).show(); 
      }, 
      function() { 
       $('ul', this).hide(); 
      } 
     ); 
    } 
}); 

и мое меню HTML код:

  <div id="menu"> 
       <ul> 
        <li> 
         <a href="index.html">wstęp</a> 
        </li> 
        <li> 
         <ul> 
          <li><a href="zespol-big-band.html">Big Band</a></li> 
          <li><a href="zespol-arti-sound-concert.html">Arti Sound Concert</a></li> 
          <li><a href="zespol-leszczynska-kapela-barokowa.html">Leszczyńska Kapela Barokowa</a></li> 
         </ul> 
         <a href="#">zespoły</a> 
        </li> 
        <li> 
         <ul> 
          <li><a href="taniec-dancing-sisters.html">Dancing Sisters</a></li> 
         </ul> 
         <a href="#">taniec</a> 
        </li> 
        <li> 
         <a href="o-mnie.html">o mnie</a> 
        </li> 
        <li> 
         <a href="kontakt.html">kontakt</a> 
        </li> 
       </ul> 
      </div> 

EDIT:

так попробовать:

$('nav > ul > li').each(function() { 
    if($('ul', this).length > 0) { 
     $(this).hover(
      function() { 
       $('ul', this).show(); 
      }, 
      function() { 
       $('ul', this).hide(); 
      } 
     ); 
    } 
}); 

Answer 2

Что вы имеете использует multiple selector selector будет показать/скрыть как в nav liи.subnavi-wrapper. Я думаю, вам нужно всего лишь переключить .subnavi-wrapper

$("nav li").hover(function(){ 
     $(".subnavi-wrapper").show(); 
    }, function(){ 
     $(".subnavi-wrapper").hide(); 
    }); 

Если вы хотите, чтобы показать .subnavi-wrapper под ток li:

$("nav li").hover(function(){ 
     $(this).find(".subnavi-wrapper").show(); 
    }, function(){ 
     $(this).find(".subnavi-wrapper").hide(); 
    }); 

Answer 3

// show 
$("nav li").live('mouseover',function(){ 
    $(".subnavi-wrapper").show(); 
}); 

// hide 
$("nav li").live('mouseout',function(){ 
    $(".subnavi-wrapper").hide(); 
});