Untermenü verschwinden auf Hover

Question

In meinem großen Projekt habe ich ein Problem. Der Code ist zu groß, um hier in seiner Gesamtheit zu posten, aber ich habe ein Beispiel für jsfiddle erstellt.

Ich habe ein dynamisches Menü mit einem Untermenüabschnitt.

Ich möchte auf Hover bestimmter Menüeintrag bestimmten Box Container zeigen.

Problem ist, wenn Hover über Menüeintrag Ich kann nicht auf Box-Container zugreifen, da es nicht innerhalb <li> Element ist, weil es dynamisch geladen wird.

Ich habe die Idee, Funktion zu erstellen, auf Hover-Menüelement, Box Container anzuzeigen und zu überprüfen, wenn MouseOut von Menüelement und Box-Container Box Container zu verbergen.

Das wird Lösung für mein Problem sein, ich habe Mouseout versucht und mouseleave, aber nicht funktioniert.

JSFiddle

$('.first-menu-item, .submenu').hover(function() { 
 
    $('.submenu').toggle(); 
 
});

.menu li { 
 
    display: inline-block; 
 
} 
 

 
.submenu { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="menu"> 
 
    <li class="first-menu-item">FIRST MENU</li> 
 
    <li>SECOND MENU</li> 
 
    <li>THIRD MENU</li> 
 
</ul> 
 

 

 
<div class="submenu"> 
 
    SUBMENU 
 
</div>

Answer 1

Eine schnelle Lösung wäre die gleiche Logik für hinzufügen, wenn im Untermenü schweben:

$('.first-menu-item, .submenu').hover(function(){ 
    $('.submenu').toggle(); 
}); 

Aber es gibt bessere Möglichkeiten, Untermenüs zu implementieren in einer listenartigen Navigation (zB wie here). Mit Ihrer Lösung würde ich dies jedoch tun.

Fiddle

Aber auch hier sollten Sie Ihre Implementierung des Untermenü überdenken. Siehe zum Beispiel Rorys Vorschlag.