title: Jquery menu: mouseover/mouseout moseenter/mouseleave craziness
body: <p>I am trying to craft a simple menu where the first level menu entries are li elements and second level are ul blocks with their own li elements. Nothing really bright. CSS contains <code>display: none</code> for all submenus and my (optimistic) idea was simply to show proper ul elements when mouseover is fired on first level entries than to hide them when mouseout is fired on the SUBmenu (the ul element). I have some problem to understand what happened. On Firefox all is nice and the action sequence: enter in the first level menu - enter in submenu - exit from submenu shows that the proper event sequence is triggered: menuOn subMenuOn subMenuOff menuOff. I cannot understand why in IE in the same event sequence subMenuOff is triggered suddenly after subMenuOn: the result is that the submenu immediately disappears. It is like the couple (subMenuOn subMenuOff) was triggered in the same time disabling submenus. No change using mouseover or mouseenter. Using hover does not change the situation. Have some idea about what happened? </p>
  
  <pre><code>$(document).ready(
      function () {
          enableMenu();
      }
  );
  
  var flagOnSubMenu = false;
  
  function enableMenu() {
      $('li.menu').bind('mouseenter', menuOn);
      $('li.menu').bind('mouseleave', menuOff);
      $('ul.sottomenu').bind('mouseenter', subMenuOn);
      $('ul.sottomenu').bind('mouseleave', subMenuOff);
  }
  
  function menuOn() {
      scrivi('menuOn');
      if (flagOnSubMenu) {
          scrivi('noAction');
          return;
      }
  
      var subMenuId;
  
      $('ul.sottomenu').hide();
      subMenuId = $(this).find("ul").attr('id');
      $('#' + subMenuId).show();
  }
  
  function menuOff() {
      scrivi('menuOff&lt;br&gt;');
      return;
  }
  
  function subMenuOn() {
      scrivi('subMenuOn');
      flagOnSubMenu = true;
  }
  
  function subMenuOff() {
      scrivi('subMenuOff');
      flagOnSubMenu = false;
      $(this).hide();
  }
  
  function scrivi(arg) {
      $('#debug').html($('#debug').html() + ' ' + arg);
  }
  </code></pre>