jQuery - ホバーのマルチレベルネストされたulサブメニュー

Question

過去数時間のさまざまなアプローチや例を試した後、製品ナビメニューのサブメニューを開くクリーンなjQueryメソッドを見つけるのが難しいです。 nav項目は、WordPressのカスタムWalkerクラスから取得されます。

「製品」をホバーすると「製品グループ」レベルが開き、次に製品グループをホバーするとサブメニューが表示されます（次のレベルがある場合は製品情報かもしれません）。 。私は）（それが最初に使用して、トップレベルのために働いていfadeToggle - 私は例えばJSFiddleを設定しました：https://jsfiddle.net/yvu237t2/4/

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

私は、次のサブレベルを見つけると開くための構文を考え出すにこだわっていますその前のレベルをホバリングすることに基づいています。

洞察力は大変ありがとうございます。ここで

は、参考のために最終結果のデザインカンプです：

メイングループの1つの製品だけがある場合、それは次のように入れ子にすることになります。

Answer 1

何私はchildren（）セレクターを使用していたことを追跡しようとしていました - もしこれが誰かが類似したものを探している場合に参考にしてください。

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