JQuery hover dropdown menu disappears when hovering on the dropdown menu

Question

I'm doing something slightly different to what i've seen work, many people have done it so there dropdown is part of a child list. However i'm trying to work with a sibling dropdown menu.

Here is my fiddle: http://jsfiddle.net/58m99wf8/

What you'll notice is that if you hover on the button, the dropdown menu appears. If you leave the button it disappears which is perfect. However if you hover on the dropdown menu it still disappears and this isn't what I want it to do.

How can i prevent this?

I've seen it work like this:

if($('#menuONE').has(e.target).length === 0) {
        // toggle menu to close
    }

However i don't see how i can attach this to the submenu as well as the button.

Answer 1

What you can do is add the menu to the selector. I also defined menu because this can refer to the button or the menu now, so traversing from there could be problematic.

var menu = $('.dropdown-menu');

$('.dropdown-hover-toggle, .dropdown-menu').hover(

function () {
    //show its sibling menu
    menu.stop().slideDown();
},

function () {
    //hide its sibling menu
    menu.stop().slideUp();
});

http://jsfiddle.net/58m99wf8/1/

Answer 2

Try this

var isSiblingHovered = false;
$('.dropdown-hover-toggle').hover(function () {
    $(this).siblings('.dropdown-menu').slideDown();
},
function () {
    var current = $(this);
    setTimeout(function(){
        if(!isSiblingHovered){
            current.siblings('.dropdown-menu').stop().slideUp();
        }
    }, 50);
});

$('body').on("mouseleave", ".dropdown-menu", function() {
    isSiblingHovered = false;
    $('.dropdown-menu').stop().slideUp();
});

$('body').on("mouseenter", ".dropdown-menu", function() {
    isSiblingHovered = true;
});

EXAMPLE