Создание меню JS/CSS - зависание не работает должным образом

Question

Живой пример здесь

Какие у меня проблемы:

• при перемещении мыши из подменю над знаком минус, подменю снова исчезает (этого не должно происходить)
• при выходе из меню за пределы подменю путем перемещения мыши вверх или влево со знаком плюс подменю не исчезает

Эти проблемы могут быть решены путем обмена z-index знака плюс и подменю. Но тогда знак минус не отображается в стиле, который я хочу, чтобы он отображался (потому что он находится за полупрозрачным подменю).

Соответствующий код JS:

$(document).ready(function() {
    if ($(".nav").length) {
        $(".nav ul ul").css({ opacity: 0.9 }).mouseleave(function(e) {
            e.stopPropagation();
            $(this).fadeOut().parent().prev().children("div").html("+").css({ lineHeight: "30px", paddingBottom: 0 });
        });
        $(".nav > ul").find("li:first").each(function() {
            $(this).append($("<div>").html("+").mouseenter(function(e) {
                e.stopPropagation();
                $(this).html("&ndash;").css({ lineHeight: "26px", paddingBottom: "4px" }).parent().next().children("ul").fadeIn();
            }));
        });
    }
});

Answer 1

ul так как выпадающее меню должно быть семантически частью вашей выпадающей кнопки, таким образом, оно является дочерним по отношению к выпадающей "кнопке", и я считаю, что это решит вашу проблему.

Редактировать: т.е. ваш выпадающий <ul> должен быть ребенком вашей кнопки +/-, а не родным братом.