Question

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! 🙁

Answer 1

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();
            }
        );
    }
});