对话框中的jquery菜单未显示子菜单

Question

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

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

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

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

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

这个问题很相似，但没有接受答案。

Problem: Menu UL is always behind jquery dialog

有什么想法吗？

Answer 1

您需要做的就是将overflow: visible添加到.ui-dialog课程，并从.ui-dialog .ui-dialog-content删除溢出。

.ui-dialog {
    overflow: visible
}

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

Updated example

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);
});