Question

I make a script for my submenu in the navigation. When i open the submenu. The submen is show and when i mouseout. The submenu is closed width a delay of 300.

But i have a problem in the script. The navigation have 8 submenu’s. When i hover over the first submenu. This submenu is open. When i hover over the second submenu. Than i have two submenu’s open.

When I open a new submenu. And there is another submenu open. The other sub should immediately close. How can I make?

Thanks a lot!

This is my script:

    $('.nav-main .container li').hover(function() {
    if ($(this).find('.submenu').length > 0) {
        $(this).addClass("hover");
        $(this).find('.submenu').show();
    }
}, function() {
    var object = $(this);
    setTimeout(function()
    {
        $(object).find('.submenu').hide();
        $(object).removeClass("hover");
    }, 300);
});

Answer 1

Before showing submenu you can hide all of submenu first;

if ($(this).find('.submenu').length > 0) {
        $(this).addClass("hover");
        $('.submenu').hide();//Here
        $(this).find('.submenu').show();
    }