Jquery / HTML下拉菜单悬停状态

Question

I am trying to create a drop-down menu that will stay open on hover even when it is hovering over the drop-down div ('#units-menu-links'). I can't get it to stay open while the user is still hovering over the 'units-menu-links' div. Currently it does nothing, but before I had the .toggle inside the second function which would just make it disappear whenever the user wasn't hovering over the "#units-nav" div.

Here is what my HTML looks like:

<div id="units-menu-links">
    <center>
            <p class="units-menu-links-items" href="dynamically generated URL">Menu Item</p>
    </center>
</div>

<div id="menu">
        <div id="menu-inside">
                <div class="bar">
                        <div class="nav-block" id="units-nav">
                                <a href="/link/">Menu Button</a>
                        </div>
                </div>
        </div>
</div>

Here is my Jquery:

$('#units-menu-links').hide();
    $("#units-nav").hover(
            function () {
                // Over the hover.
                $('#units-menu-links').toggle();
            },
            function () {
                // PLEASE READ THE FOLLOWING COMMENTS TO UNDERSTAND THE FUNCTIONALITY I AM TRYING TO GET.
                // When the users leaves #units-nav and #units-menu-links
                // then do the "$('#units-menu-links').toggle();" again to hide this.
                // However if the user is hovering over "$('#units-menu-links').toggle();" then don't do anything.
            }
    );

(I've looked at quite a few questions and answers on SO as well as looking on Google, and can't find anything to help me with this problem. It seems like it is be a very common problem, but people have created their HTML structure differently to mine which is making it difficult to find resources.)

Answer 1

Try hiding the menu when the mouse goes outside the submenu:

$('#units-menu-links').hide();
$("#units-nav").hover(
    function () {
        $('#units-menu-links').show();
    },
    function () {
    }
);
$("#units-menu-links").hover(
    function () {
    },
    function () {
        $('#units-menu-links').hide();
    }
);

​

Ideally, I would suggest not using JavaScript.

HTML:

<div id="menu" style="background-color: red">
    <div id="menu-inside">
        <div class="bar">
            <div class="nav-block" id="units-nav">
                <a href="/link/">Menu Button</a>
            </div>
        </div>
    </div>
    <div id="units-menu-links" style="background-color: green">
        <center>
            <p class="units-menu-links-items" href="dynamically generated URL">Menu Item</p>
        </center>
    </div>
</div>

​CSS:

#menu #units-menu-links {
    display: none;
}

#menu:hover #units-menu-links {
    display: block;
}
​

Here's the Fiddle .

Answer 2

$('#units-menu-links').hide();
var timeOut;
$("#units-nav").hover(
    function () {
        // Over the hover.
        $('#units-menu-links').show();
        clearTimeout(timeOut);
    },
    function () {
        timeOut = setTimeout(function(){
            $('#units-menu-links').hide();
        }, 100);
    }
);

$('#units-menu-links').hover(
    function () {
        clearTimeout(timeOut);
    },
    function () {
        timeOut = setTimeout(function(){
            $('#units-menu-links').hide();
        }, 100);
    }
)

Answer 3

When using hover you should have your submenu nested under #units-nav element. Then it will work. If it is not possible to do so, you can implement some timeout to the second callback of your hover function and you can stop the timeout if the user will hover the #units-menu-links-element ..But this is kinda awful, users can get confused with that behavior.