Hi, I have this structure in my code.
The navbar is a vertical menu.
I want the navbar to be scrollable with the items.
The “nav-item” divs, have a submenu which on hover the appearing.
When I put overflow-y: auto in the navbar, then the submenu on the divs is not showing.
The submenu should be appearing on the right side, outside of the div.
Is there a way that I can make it work?
Should I change the structure of the menu in order to make it to work?
To make your navbar scrollable while ensuring the submenu appears correctly:
This setup should allow the navbar to scroll while making the submenu visible on hover without being hidden or clipped.
Thank you very much, yes will try it and let you know if it will not work!
No it won’t not if the overflow-y has been set as mentioned in the first post because the -x will also be subject to a scrollbar. The navbar element would need to be wide enough by default to show the popup item without needing to scroll. The code you posted is just the code for a normal dropdown effect and doesn’t take into account scrolling 
Do you have a demo of what you have now so I can make sure I understand what you want.
It seems to me that you want a limited height box and allow popups to appear outside of the
scrollable box.
I think you are looking for something like this experiment of mine that works in most modern browsers only.
It uses the CSS :has property to place the submenus outside the scroll box but requires the html to be as shown in the codepen. (Note there are no small screen or touch styles built into this as it was just a proof of concept demo).
Yes something like that, but the pop is appearing from the left corner seems a bit strange.
Yes that can be changed easily. I’ve just updated the pen and made it slide up a little.
awesome thanks!
There is a new css property that should make this easier once it has better browser support (or you use the JS polyfill). You can watch the video here by Kevin Powell.
I haven’t tested it yet on scrollable boxes so that may complicate things. I’ll have a play around tomorrow when I have time 
It does wok on scrollable containers but is a click menu not a hover effect.
Click is much better for accessibility and device independence and should work on mouse, touch and keyboard alike.
Note: Modern browsers only but there are polyfills if needed.
A different test version below:
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
