Force mouseleave on CSS menu after submenu click

Question

as you can see here http://www.revistatres.com.br/daniel/trecinco I have a CSS menu with drop-down submenus.

In order to force the submenus to disappear once they are clicked, I used the following:

    $("#menu ul li ul").click(function(){ 
        $(this).css("visibility", "hidden");    
    });     

and in order to make the submenus re-appear once the menu gets hovered again, I used the following:

    $("#menu ul li").hover(function(){
        $(this).children().css("visibility", "visible");    
    });

My problem right now is that even after the submenus disappears, the top menu remains "selected" as if CSS thinks it's still hovered, hence, the background colour remains darker until I move the mouse pointer.

In the $("#menu ul li ul").click event, I've tried these options to force CSS to realise that the pointer is not over "#menu ul li" anymore:

            $("#menu ul li").trigger("mouseleave");

            $("#menu ul li").css("removeClass","hover");

and a bunch of other things, but none worked.

Any ideas?

Thank you.

Answer 1

Instead of visibility, You can try display property.

Working Demo

jQuery

 $("#menu ul li").hover(function(){
        $(this).children().css("display", "block");    
    });

$("#menu ul li ul").click(function(){ 
        $(this).css("display", "none");    
    });  

Answer 2

You could do this with a mouseup event, because the only time the user is going to mouseup is after they've clicked a link.

$( '#header' ).mouseup(function() {
  //reset header
});

I think this is exactly what you want, try it out:

$("#menu ul li").mouseup(function(){
    $("#menu ul").css('background-color','#ccc');
});