Hiding css dropdown menu on hover

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/

I don't think what you're trying to do is possible using pure CSS. — RevanProdigalKnight
– RevanProdigalKnight, Commented Jul 15, 2014 at 12:47
It can't be accomplished with CSS in general case. But for your specific markup there is a trick jsfiddle.net/Tw44R/13 — Yury Tarabanko
– Yury Tarabanko, Commented Jul 15, 2014 at 12:53

Community · Accepted Answer · 2017-05-23 12:11:02Z

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).

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Jul 15, 2014 at 12:50

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

Comments

Jai · Accepted Answer · 2014-07-15 12:52:29Z

1

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

answered Jul 15, 2014 at 12:52

Jai

74.8k12 gold badges77 silver badges104 bronze badges

1 Comment

user2585299 Over a year ago

Your solution also hides the dropdown when I hover on Home 3.

Puzzled · Accepted Answer · 2014-07-15 13:43:53Z

1

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/

edited Jul 15, 2014 at 13:43

answered Jul 15, 2014 at 13:33

Puzzled

745 bronze badges

Comments

Bla... · Accepted Answer · 2014-07-15 14:24:32Z

1

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..

edited Jul 15, 2014 at 14:24

answered Jul 15, 2014 at 12:53

Bla...

7,2887 gold badges31 silver badges47 bronze badges

1 Comment

user2585299 Over a year ago

Your solution hides the dropdown menu when I am hovering over the sub menus.

Collectives™ on Stack Overflow

Hiding css dropdown menu on hover

4 Answers 4

Comments

Demo

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related