jquery - 对话框内的jquery菜单不显示子菜单

Question

我有一个 jquery 菜单，带有子菜单，在这样的 jquery 对话框内。

http://jsfiddle.net/pnmpn25/VPXjs/17/

$("#menu").menu();

$("#dlg").dialog();

我的问题是，当我打开子菜单时，它会隐藏在 div 内并出现滚动条。我想要发生的是子菜单与对话框重叠。我试过设置z-index，但无济于事（位置：绝对）

这个问题类似，但没有公认的答案。

问题：菜单 UL 总是在 jquery 对话框后面

有任何想法吗？

Answer 1

您需要做的就是添加overflow: visible到.ui-dialog类并从.ui-dialog .ui-dialog-content.

.ui-dialog {
    overflow: visible
}

.ui-dialog .ui-dialog-content {
    overflow: inherit;
}

更新示例

Answer 2

为所有子菜单添加一个类

然后，单击这些子菜单中的每一个，将对话框调整为所需的宽度

http://jsfiddle.net/VPXjs/19/

另外，这是示例代码：

  <li class='submenu'><a href="#">Ada</a></li>
  <li class='submenu'><a href="#">Adamsville</a></li>
  <li class='submenu'><a href="#">Addyston</a></li>
  <li class='submenu'>

$('.submenu').click(function() {
    $('#dlg').dialog('option','width',460);
});