在JQuery ui菜单中滚动子菜单

Question

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

这很好，但似乎这样做不适合子菜单。子菜单有时会在其父级底部创建一个水平滚动条而不是向右延伸。最后，我希望主菜单和我的子菜单都能正确滚动，而不是任何horrizontal滚动条。

正如你在这个小提琴中看到的那样：http://jsfiddle.net/kPVKL/菜单“两个”将打开正常，但菜单“三”只显示一个horrizontal滚动条。

我怀疑我的问题在这里：

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

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

提前致谢。

Answer 1

这个小提琴 - 从我黑客攻击相同的问题（和其他人，抱歉无关的stuf） - http://jsfiddle.net/marvmartian/VT37s/ - 适用于Chrome和FF。关键似乎是＆＃34;位置：固定！重要;＆＃34;在ui菜单CSS：

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

我不知道为什么会这样。检查jquery ui正在构建DOM的方式看起来没问题 - 所有子菜单都是位置：绝对的，我看不出它们应该相互嵌入的任何原因;但正如你所指出的那样，第三级子菜单以某种方式嵌入到第二级子菜单中。