I have got a CSS issue. My submenu, which contains a 3rd level sliding from to the right on mouse over, cover the complete height of the screen, see #1
I choose to limit its height using max-height for the submenu, #2 which works, but when adding overflow-y: scroll the 3rd level sliding menu doesn’t appear anymore and an horizontal scroll appears, something I don’t want see #3. Therefore I added overflow-x: hidden; to avoid this scrollbar, now it is gone, but the mouse over sliding 3rd nivel menu to the right doesn’t seem to work, I see a flicker but not the text I am expecting.
Unfortunately when you create an overflow on any axis then the element becomes ‘atomic’ in the sense that it now contains all elements within its boundaries and offers scrollbars to see any hidden content.
Your flyout menu is actually there to the side but as you removed the horizontal scrollbar you can’t scroll to it.
To explain the issue look at the first item in this quickly changed demo and I have restricted the height but increased the width to allow the flyout to show.
This is only to show that the flyout menu is there but of course looks a bit awkward as the scroll bar is too far away from the original menu.
I don’t believe there is a CSS only solution to what you want.
If that’s not suitable and you still want a vertical scrollbar on the dropdown only then that would require scripting as you would have to grab the menu item and re-plant it outside the overflowing element or indeed keep the sub menus separate and let js place them.
1 Like
Just to clarify that the above applies if the parent element in question is positioned. If the parent element is not positioned then you can escape an overflow but only from a non position context so is not useful for dropdowns unless it’s a single level like this very rough demo.
1 Like
Thank you Paul.
I reckon I should be better displaying the 3rd level below the 2nd level then.
After reviewing different options I decided against using that submenu. Instead of showing in the menu all the available people they will be shown on a separate page clicking on the area.
1 Like
That sounds like a good choice 
Multiple drop downs can become very unwieldy.
Just to answer my own post I did find a way to do this in CSS only with the caveat being that the dropdowns and menu items have to have a fixed width.
It’s only a bare bones example to show what’s possible. Whether its feasible or not is another matter. I’m not a great fan of hover dropdowns anyway as there is always the mobile/touch issue to consider also.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.