Question

I’m trying to make a drop-down menu using two divs, the first <div> has the .hover() function which shows the second <div>. Since the first div has the .hover() function when I pass my mouse pointer over the second <div>, it disappears.

How can I disable the first <div>‘s .hover() function when my mouse pointer is over the second <div>?

Answer 1

Make a containing div that wraps both of your menu divs. When the first menu div is hovered, show the second div – when the containing div is no longer hovered, hide the second div.

Hopefully that makes sense:

    function show() {
    var elem = document.getElementById("secondmenu");
    elem.style.display = "block";
    }
    function hide() {
    var elem = document.getElementById("secondmenu");
    elem.style.display = "none";
    }

<div id="container" onmouseout="hide()"><div id="firstmenu" onmouseover="show()">this is the first menu</div><div id="secondmenu" style="display: none;">this is the second menu</div></div>