Making JS/CSS menu - hover not working properly

Question

Live example is here

What my problems are:

when moving mouse from sub menu over minus sign, the sub menu fades in again (this should not occur)
when leaving menu outside the sub menu by moving mouse upwards or leftwards the plus sign, the sub menu does not fade out

These problems could be managed by exchanging z-index of plus sign and sub menu. But then the minus sign is not displayed in the style I want it to be displayed (because it lays behind the semi transparent sub menu).

Relevant JS code is:

$(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();
            }));
        });
    }
});

please provide relevant code in the question itself, rather than simply providing a link. — jackwanders
– jackwanders, Commented Jul 29, 2012 at 15:35

azz · Accepted Answer · 2012-07-29 15:48:36Z

1

The ul for the dropdown menu should be semantically a part of your drop down button, this way it is a child of the drop down 'button', and I believe this will solve your problem.

Edit: i.e. your drop-down <ul> should be a child of your +/- button, not a sibling.

edited Jul 29, 2012 at 15:48

answered Jul 29, 2012 at 15:40

azz

5,9703 gold badges33 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Making JS/CSS menu - hover not working properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related