Question

I have made a horizontal menu that contains images and text.
However, I used this code to show and hide it’s submenu:

$('#top_menu').hover(function(e) {
    $('#about_submenu').fadeIn('slow');
},function(){
    $('#about_submenu').fadeOut('slow');
});

Everything works fine, but whenever I move the mouse from parent to its submenu, the submenu disappears because of fadeOut. How can I keep submenu appearing when I move cursor from parent link position?

Answer 1

Try this:

$('#top_menu').hover(function(e) {
    if(!$('#about_submenu').is(':visible'))
    {
        $('#about_submenu').fadeIn('slow');
    }
},function(){
    if(!$('#about_submenu').is(':hover'))
    {
        $('#about_submenu').fadeOut('slow');
    }
});

$('#about_submenu').mouseout(function(){
    if(!$('#top_menu').is(':hover'))
    {
        $('#about_submenu').fadeOut('slow');
    }
});