Jquery hover + абсолютная позиция = проблемы в IE

Question

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

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

и это код JS

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

РЕДАКТИРОВАТЬ: очевидно, это поля в верхней части раскрывающегося списка, которые, кажется, активируют "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>

РЕДАКТИРОВАТЬ:

так что попробуйте:

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

Answer 2

То, что у вас есть, использует множественный селектор селектор покажет / скроет как 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();
});