javascript - jquery メニュー ui. 第 2 レベルのサブメニューが展開されると、第 3 レベルのサブメニューが自動的に展開されます

Question

第 1 レベルの親が展開されると、第 3 レベルのメニューが自動的に展開されるようにしようとしています。したがって、私が持っている例では、最初のアイテムにカーソルを合わせると、アイテム 1 サブメニューが (通常のように) 表示され、その下に最初のサブメニューも表示されます。アイテム 2 も表示されるはずです。http://jsfiddle.net/n2Sxc/1/

jsfiddle にあるこのコードを使用しようとしました。

$("#main-nav li").mouseover(function () {
    $("#main-nav li ul li.first ul").show();
});

API のドキュメントも確認しましたが、expand や focus の使い方がよくわかりません。それが私が使いたいものであるかどうかさえわかりません。

フォーカス: http://api.jqueryui.com/menu/#event-focus

展開: http://api.jqueryui.com/menu/#method-expand

メニューを開始するときにこれも試しました

$('#main-nav').menu({
    focus: function( focus, ui ) {
        $("#main-nav li").hover(function (){
            $("#main-nav li ul li.first ul").show();
        });
    }
});