CODEWITHSUNDEEP
jquerycssmenunavigationhover
rabudde
rabudde

Reputation: 7722

Making JS/CSS menu - hover not working properly

Live example is here

What my problems are:

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

Upvotes: 0

Views: 326

Answers (1)

azz
azz

Reputation: 5940

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.

Upvotes: 1

Related Questions