Jquery menu: mouseover/mouseout moseenter/mouseleave craziness

Question

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 display:none for all submenus and my (optimistic) idea was simply to show proper ul elements when mouseover is fired on first level entries then 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 trigegred 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? This is the 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<br>');
    return;
}

function subMenuOn(){
    scrivi('subMenuOn');
    flagOnSubMenu = true;
}

function subMenuOff(){ 
    scrivi('subMenuOff');
    flagOnSubMenu = false;
    $(this).hide();    
}

function scrivi(arg){ 
    $('#debug').html( $('#debug').html() + ' ' + arg );
}

Answer 1

Some browsers/frameworks bubble the events, some don't.

i.e. (I'm not sure which way around it goes AFA browsers) One browser will trigger mouseout when the mouse moves from an element to a child element. Another will not but will trigger a mouseover that can be also caught by the parent element.

Answer 2

I had some crazy issues with mouseover and mouseout events.

$("#menu>li").hover(
    function(){
        $("#menu *:animated").stop(true,true).hide(); //stop the madness
        $('ul',this).slideDown();
    },
    function(){
        $('ul',this).slideUp("fast");
    }
);

Stopping the animations was the key for me. Without that, animations would keep firing long after I was finished mousing over my menu.