Question

I have make a script. That open my submenu in the navigation. When you go mouse out of the submenu. The submenu must be closed with a delay of 300ms. But the delay is not working. How can i fix this? This is my script:

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

Answer 1

I haven’t tested the following code but it should work …

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