在悬停时隐藏CSS下拉菜单

Question

In the navigation bar, on click of "Home 3" menu, a dropdown menu appears through jQuery. I want to hide this menu when I hover on other links of the menu for which I have included style as below:

.nav-ul .menu-item:hover ul{
    display:none;
}

Here is the fiddle: http://jsfiddle.net/Tw44R/1/

Answer 1

The selector .nav-ul .menu-item:hover ul will only target the <ul> inside the .menu-item item being hovered.

You can't traverse up the DOM using CSS as of now.

Add the following script:

$('.menu-item').hover(function(){
    $(this).siblings().find('ul').hide();
});

Demo

Update:

If you want to hide the dropdown when the mouse moves away, you can use the second callback of hover, as given below:

$('.menu-item').hover(function () {
    $(this).siblings().find('ul').hide();
},

function () {
    $(this).find('ul').hide()
});

Demo

Side note: For anyone down voting seeing Yury Tarabanko 's comment, it's not a reliable solution for the task at hand ( it doesn't work if the submenu is before the hovered item ).

Answer 2

Try with jQuery's mouseenter:

$(function () {
    $(".nav-header .nav-ul .menu-item .menu-item-link").click(function (link) {
        if (link.currentTarget.text === 'Home 3') {
            $(this).next("ul").css('display', 'block');
        }
        link.stopPropagation();
    }).mouseenter(function () {
        $(".nav-header .nav-ul .menu-item ul:visible").css('display', 'none');
    });
});

Demo

Answer 3

You can use this approach:

$(".nav-header .nav-ul .menu-item").hover(function (){
        $(".menu-item").each(function(){
            if($(this).find("ul").css("display") == "block")
                $(this).find("ul").css("display","none");
        });
    })

Check out this JSFiddle ..

EDIT: I shouldn't used .menu-item-link, just edited the JSFiddle too. Everything works fine.. Thank you for pointing out my mistake..

Answer 4

This solution will open the sub-menu with a click and close the sub-menu when you move away from either the header or the sub-menu.

I gave each header item an id

<li class="menu-item" id="3">

Then:

$(function(){
   $("#3").click(function(){
     $(".nav-ul .menu-item ul").css('display', 'block');
   });
   $("#3").mouseleave(function(){
     $(".nav-ul .menu-item ul").css('display', 'none');
   });
});

Check it out:

http://jsfiddle.net/Tw44R/20/