Hi (me again! ),

I want to make the submenu has auto scrollbar as I have lot of menu items. It did work for first level submenu as shown in picture. But level 3 submenu doesn't appear! Please help!!

I used below code

ul.ux-menu a {
padding-left: 10px !important;
padding-right: 5px !important;
}

ul.ux-menu-sub {
z-index: 30000;
min-height:150px;
max-height:390px;
overflow-x:hidden;
overflow-y:auto;
}

Hi again.

Try removing "overflow-x: hidden;"

The code basically says to hide everything overflowing in the x-axis. This hides the sub-sub-menus because they flow out to the right (in the x-axis).

Hi,

I checked what's the reason of the 2nd submenu disappearance when I removed the "overflow-x:hidden;" code. It turns out that the submenu is inside or bound with the first submenu.

Hi again..

it's the overflow code (both overflow-x and overflow-y) that hides the sub items.

Hi,

So I can't use overflow code? Any other code that can make it scroll?

Maybe the admin knows?



Unfortunately I cant think of any code that would make it work without having to rewrite the html structure of the menu.

Currently the menu structure goes like ul > li > ul > li etc..

This means if you overflow something on one ul it hiddes the ul-submenu items.




Here's what happens when using overflow on .ux-menu-sub.

The ul.ux-menu-sub is absolute positioned to a relative positioned li.ux-menu-item-parent.
Because the li-item is positioned relative it acts like a container to the absolute positioned ul.ux-menu-sub.

The absolute positioned ul.ux-menu-sub is moved from the left border to the right with code that calculates the width of its parent item, being li.ux-menu-item-parent, + 1px. If this wasn't happening the ul.ux-menu-sub would be positioned under the li.ux-menu-item-parent. The code mentioned above is the reason to why the ul.ux-menu-sub, appears to the right of its parent item being li.ux-menu-item-parent.

So basically the whole menu is originally structured as a list, with each item below each other. So that is why the "overflow-y: auto;" hides the sub-menu levels but the first level.

edit: clarity