CODEWITHSUNDEEP
javascriptjquerycssinternet-explorer
Enrique Moreno Tent
Enrique Moreno Tent

Reputation: 25237

Jquery hover + position absolute = Problems in IE

I'm making a drop down menu and it works great in all modern browser but im not sure, it fails in IE, when i try to select the sub-elements of the submenu, it disappears.

This is the page: http://XXX/

and this is the JS code

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

EDIT: Apparently it's the margins on top of the dropdown which seem to activate the "mouseout" in IE! Aparently jQuery detects badly the area of the items with position absolute! :(

Upvotes: 0

Views: 2208

Answers (3)

marverix
marverix

Reputation: 7705

It's all because block "subnavi-wrapper" in Li element. You must remove DIV and try do it only by using Ul element. I made something like it here: http://www.muzykakoncerty.pl

here, something like this:

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

and my menu HTML code is:

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

so try it:

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

Upvotes: 1

ezmilhouse
ezmilhouse

Reputation: 9121

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

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

Upvotes: 0

Adam Hopkinson
Adam Hopkinson

Reputation: 28795

What you have uses the multiple selector selector will show/hide both the nav li and the .subnavi-wrapper. I think you only need to toggle the .subnavi-wrapper

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

If you only want to show the .subnavi-wrapper under the current li:

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

Upvotes: 1

Related Questions