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("–").css({ lineHeight: "26px", paddingBottom: "4px" }).parent().next().children("ul").fadeIn();
}));
});
}
});
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: ie your drop-down <ul>
should be a child of your +/- button, not a sibling.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.