Випадаюче меню Jquery не відображається при наведенні

Я налаштував типову навігаційну панель, і коли ви наводите курсор на один елемент ("Наші команди"), з'явиться випадаюче меню (за допомогою jQuery нижче):

$("li#menu-item-20").hover(function(){
            $("#dropdown").stop().fadeIn(500);
        }, function(){
            $("#dropdown").stop().fadeOut(500);
        });

Після цього наведіть курсор миші на випадаюче меню ( #dropdown ), яке випадає (тому що я відхилявся від пункту меню). Зникають після того, як ви вийдете з випадаючого меню та меню навігації.

Any ideas? You can see a working example at http://pixelcakecreative.com/cimlife/

1

1 Відповіді

Якщо ви прив'яжете подію mouseleave до елемента #dropdown , випадаюче меню залишатиметься, поки користувач не вимкне випадаюче меню:

//Note: no need for the `li` here as there will only be 1 element with this id on the document
$('#menu-item-20').bind('mouseenter', function() {
    $("#dropdown").stop(true, true).fadeIn(500);
});
$('#menu-nav').children('.menu-item').not('#menu-item-20').bind('mouseenter', function() {
    $("#dropdown").stop(true, true).fadeOut(500);
});
$('#dropdown').bind('mouseleave', function() {
    $("#dropdown").stop(true, true).fadeOut(500);
});

Here is a jsfiddle of the above solution: http://jsfiddle.net/jasper/kED9T/2/

0
додано
спасибі це відмінне рішення
додано Автор JCHASE11, джерело
Єдина проблема з цим полягає в тому, що якщо ви наведете курсор миші на випадаюче меню, а потім наведіть курсор на інший елемент навігації, випадає спад.
додано Автор JCHASE11, джерело
ДЯКУЮ!!! це була величезна допомога
додано Автор JCHASE11, джерело
Я оновив відповідь і jsfiddle, щоб включити обробник подій для накладання миші на інші .menu-items .
додано Автор Jasper, джерело