CSS Drop Down Menu hidden behind horizontal scrollbar

[PaulOB]

@anon56670668

One of you guys probably said “I told you about that”. But please don’t say it now.

Sorry I can’t resist

If I have given advice then I have taken time to think and help out as best I can. If you missed the advice the first time time around (or didn’t understand it) then perhaps you should go back and re-read my answers more fully now that you have found out the same for yourself.

@anon56670668

The solved biggee was to get the drop down menu to go over the scrollbar. THE cause was that the li.drop was absolute positioned inside a relative position enclosure. AARG!!!

I already pointed that out to you at the start and then tested it for you to show that it was not possible and you would run into the issue as shown in my codepen and as your current demonstration.

@PaulOB

There is one other way that might work and that is not to have a position:relative context on the absolute menu. If three is no position:relative parent inside the scrollbox then the absolute element should appear outside of the scrollbox.

@PaulOB

Actually while that will appear to work initially it will misplace the dropdowns that you have to scroll to see.

@PaulOB

I think the only solution if you want to scroll menu items sideways is to resort to JS to achieve this as I don’t believe there is a css only solution that can handle this nicely.

I’m not sure what you don’t understand when I say there is no way to make a drop down menu work properly inside a scrollable element and have the drop menu remain outside the scrollable element and in touch with the trigger point when the menu has scrolled sideways. It is not possible to do this unless you write some JS to move the menu to the new position of the scrolled item

I’ve been doing these menus for 25 years and I can tell you that you cannot do what you are attempting in pure CSS. Its not desirable either unless you can build in some accessibility features but that’s a whole set of other questions that need to be addressed.

Looking at your code you are obviously at a very early stage in your html and css journey and while this is a good chance for you to learn how to do things it is not good to try and achieve the impossible with limited knowledge.

Lose the scroll container and instead make sure your menu doesn’t overflow.

If you must have a scrolling sideways menu with a dropdown then you better start learning some advanced JS to do this.

Sorry if the above sounds a bit harsh but I’d rather you didn’t waste years on something that can’t possibly work in the manner you are attempting.