滾動子菜單中的jQuery UI的菜單

Question

以下問題告訴您如何在jQuery的UI菜單使用垂直滾動條：JQuery UI Menu Scroll

這是不錯，但似乎這樣做不會對工作的子菜單這麼好。子菜單有時會在父級的底部創建一個水平滾動條，而不是向右延伸。最終，我希望主菜單和子菜單能夠正確滾動，並且不會有任何水平滾動條。

正如你可以在這個小提琴中看到的：http://jsfiddle.net/kPVKL/菜單「two」將打開正常，但菜單「three」只顯示水平滾動條。

我懷疑我的問題在這裏：

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

1. 我有什麼錯？
2. 有沒有更好的方法？我唯一的約束是我必須使用jquery-ui菜單，其他任何事情都會發生。

在此先感謝。

Answer 1

這個小提琴 - 從我黑客攻擊相同的問題（和其他人，對於無關的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-wise的過程看起來沒問題 - 所有的子菜單都是絕對的，我看不出爲什麼它們應該嵌入對方;但正如您所指出的那樣，第三級子菜單以某種方式嵌入到二級子菜單中。