Scrolling submenus in JQuery ui menu

Question

The following question tells how use a vertical scroll bar in the JQuery-ui menu: JQuery UI Menu Scroll

That's good but it appears that doing this doesn't work so well for submenus. The submenus will sometimes create a horrizontal scroll bar at the bottom of their parent instead of extending to the right. Ultimately, I would like both the main menu and my sub menus to scroll verically and not have any horrizontal scrollbars.

As you can see in this fiddle: http://jsfiddle.net/kPVKL/ Menu "two" will open up fine but menu "three" just displays a horrizontal scroll bar.

I suspect my problem is here:

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

1. Where did I go wrong?
2. Is there a better approach? My only constraint is that I must use the jquery-ui menu, anything else goes.

Thanks in advance.

Answer 1

This fiddle -- from me hacking with the same issue (and others, sorry for the extraneous stuf ) -- http://jsfiddle.net/marvmartian/VT37s/ -- works in Chrome and FF. The key appears to be "position: fixed !important;" on the ui-menu CSS:

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

I have no clue why this works. An inspection of what jquery ui is building DOM-wise looks OK -- all the submenus are position: absolute and I can't see any reason why they should be embedded in each other; but as you point out, the third level submenu embeds itself in the second level submenu somehow.