Javascript jquery菜单用户界面。展开第二级子菜单时自动展开第三级子菜单

我试图得到一个三级菜单，当它的第一级父菜单被展开时，它会自动展开。因此，在我的示例中，当您将鼠标悬停在第一个项目上时，我希望显示“项目1”子菜单（类似于“正常”），然后显示该子菜单下的第一个子菜单。第2项也应显示

我尝试过使用JSFIDLE中的代码

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

我也看过api文档，但我并不清楚如何使用expand或focus。我不确定这是否是我想用的

重点：

扩展：

我在启动菜单时也尝试过这一点

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

---

是的，专注和扩展是你所需要的。您不需要。show（）

我不确定您的鼠标盖是否会与正常的菜单事件处理冲突

首先，至少要让一些简单的东西工作起来，下面这样的代码可以在创建菜单后自动扩展子菜单（为了简化选择器，您可以在菜单项中添加ID，我怀疑选择器是否选择了预期的内容）：

在当前的jquery-ui-1.10.3+jquery-2.0.3中，此代码实际上会失败，因为有一些空元素访问。。。这是jquery中的一个bug。我现在找不到bug标签，但我看到它已经解决了，在下一个版本中也可以

$("#main-nav").menu()
.menu("focus",null,$("#main-nav > li.first"))
.menu("expand")
.menu("focus",null,$("#main-nav > li.first > ul > li.first"))
.menu("expand");