jquery - 在JQuery ui菜单中滚动子菜单

以下问题说明了如何在JQuery-ui菜单中使用垂直滚动条：JQuery UI Menu Scroll

很好，但是看来对子菜单来说效果不佳。子菜单有时会在其父级的底部创建一个水平滚动条，而不是向右扩展。最终，我希望主菜单和子菜单都能够垂直滚动，并且没有任何水平滚动条。

如您在此小提琴中所看到的：http://jsfiddle.net/kPVKL/菜单“两个”将很好地打开，但是菜单“三”仅显示水平滚动条。

我怀疑我的问题在这里：

     .ui-menu {
               width: 150px;
               height: 200px;
               overflow-y: scroll;
      }

我哪里做错了？
有没有更好的方法？我唯一的限制是我必须使用jquery-ui菜单，否则其他所有操作都会发生。


提前致谢。

最佳答案

这个小提琴-从我这里来破解相同的问题（其他人则为这个多余的stuf感到抱歉）-http://jsfiddle.net/marvmartian/VT37s/-在Chrome和FF中有效。关键似乎是“位置：固定！重要”；在ui菜单CSS上：

.ui-menu {
    width: 150px;
    height: 70px;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: 100 !important;
    position: fixed !important;
}

我不知道为什么会这样。检查什么jQuery ui正在构建DOM方式看起来不错–所有子菜单都处于位置：绝对，我看不出它们为什么要相互嵌入的任何原因；但正如您所指出的，第三级子菜单以某种方式将其自身嵌入第二级子菜单。

关于jquery - 在JQuery ui菜单中滚动子菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20206692/