jQuery - sous-menus imbriqués à plusieurs niveaux sur hover

Question

Après avoir essayé différentes approches et exemples au cours des dernières heures, je n'arrive pas à trouver une méthode jQuery propre pour ouvrir les sous-menus d'un menu de navigation. Les éléments nav sont tirés d'une classe Walker personnalisée dans WordPress. L'idée est que "Produits" hovering ouvre le niveau "Groupes de produits" ci-dessous, puis planant le groupe de produits ouvre son sous-menu à sa droite (si elle a un niveau suivant - pourrait être juste des informations produit). Je l'ai travailler pour le niveau supérieur en utilisant d'abord() fadeToggle - J'ai mis en place un jsFiddle par exemple:. https://jsfiddle.net/yvu237t2/4/

$("ul#productnav").hover(function() { 
    $("ul.sub-menu").first().fadeToggle("fast"); 
}); 

Je suis coincé sur la syntaxe déterminer pour localiser et ouvrir le niveau suivant sous , basé sur planer le niveau avant lui.

Un aperçu, très apprécié.

Voici un échantillon de conception du résultat final de référence:

S'il n'y a qu'un seul produit dans le groupe principal, il serait alors imbriqué comme:

Answer 1

Qu'est-ce que J'essayais de traquer était en utilisant le sélecteur des enfants() - affichage ici pour référence au cas où cela aide quelqu'un d'autre à la recherche de quelque chose de similaire.

$('ul#productnav li').hover(function() { 
    $(this).children('ul').toggleClass('active'); 
});