How do hover events of jqurey interact with each other in different DIV?

above

question: when I hover over the icon in the upper left corner, the left navigation pops up, that is, Navigation one, and then I move the mouse down to the navigation for a moment when all the navigation disappears, that is, the icon hover event starts. I don"t want to trigger the move-out event of the icon after the next level of navigation, but what should I do if the move-out event is executed where the icon is not a first-level menu?

May.22,2021

roughly means that the html of the subordinate menu is placed on the inside of the upper layer

<div onmouseover="$('-sharpmenu1').show()" onmouseout="$('-sharpmenu1').hide()">
    <div></div>
    <div id="menu1" onmouseover="$('-sharpmenu2').show()" onmouseout="$('-sharpmenu2').hide()">
        <div id="menu2"></div>
    </div>
</div>
Menu