Сохраняйте <div>2 видимым, когда мышь находится над <div>1

Question

Я пытаюсь создать выпадающее меню, используя два элемента div, первый <div> имеет функцию .hover (), которая показывает второй <div>.Так как первый div имеет функцию .hover (), когда я нахожу указатель мыши на второй <div>, он исчезает.

Как отключить функцию .hover () первого <div>, когдамой указатель мыши находится над второй <div>?

Answer 1

Создайте содержащий div, который обернет оба ваших div-элемента меню.Когда первый div меню находится, покажите второй div - когда содержащийся div больше не находится, скрыть второй div.

Надеюсь, это имеет смысл:

    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>