A vertical menu/accordion with jQuery hover() in Internet Explorer

What I want to do is pretty simple, so I'd rather not bloat my app with jQuery UI or some plugin.

I have a menu structure like so:

<ul class="menu">
  <li class="main">
    <a href="#">Main menu</a>
    <ul>
      <li>Sub item</li>
    </ul>
  </li>
</ul>

I have it styled so the "sub-<ul>" is hidden.

This code works perfectly on both Firefox and Chrome, but surprise surprise, Internet Explorer fires the "mouseout" event when the mouse is over the sub开发者_如何学JAVA menu:

$(function() {
  $('ul.menu li.main').hover(function() {
    $(this).find('ul').slideDown();
  }, function() {
    $(this).find('ul').slideUp();
  });
});

So in IE7, when the submenu is displayed, as soon as I try to select an item in it, the menu slides up again.

Update: I was just able to try IE8 and it works fine too. So it's just IE7 (and probably 6 but I can live with that).

I also tried using hoverIntent, which claims to ignore events on children, but it doesn't work either.

Maybe you should try to select only the "li.main" element to attach the hover event.

$('li.main').hover(function() { ... }

It's supposed to work on IE.

This won't really answer your question but you really don't want to use SlideUp/Down on hover because it moves the whole menu items up and down so you never point at what you wanted to slidedown (of course, it has moved up again when the previous item has collapsed because of the mouseout). The user experience can be catastrophic.