JQuery ui 菜单中的滚动子菜单

Question

下面的问题讲述了如何在 JQuery-ui 菜单中使用垂直滚动条：JQuery UI Menu Scroll

这很好，但这样做似乎对子菜单效果不佳。子菜单有时会在其父菜单的底部创建一个水平滚动条，而不是向右延伸。最终，我希望主菜单和我的子菜单都可以垂直滚动，并且没有任何水平滚动条。

正如你在这个小提琴中看到的：http://jsfiddle.net/kPVKL/ 菜单“二”会很好地打开，但菜单“三”只会显示一个水平滚动条。

我怀疑我的问题在这里：

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

1. 我哪里出错了？
2. 有更好的方法吗？我唯一的限制是我必须使用 jquery-ui 菜单，其他的都可以。

提前致谢。

Answer 1

这个小提琴——来自我用同样的问题（和其他人，对无关的东西感到抱歉）——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 方式看起来不错——所有子菜单都是 position: absolute ，我看不出它们应该相互嵌入的任何理由；但正如您所指出的，第三级子菜单以某种方式嵌入到第二级子菜单中。