An analogue of white-space: nowrap and max-width, what do you recommend?

Question

css

I'm making a regular dropdown menu, but there is a problem, previously I always used white-space: nowrap so that the width is not tied to the parent's width, but I ran into a problem. In this case, the paragraphs are too long, it's logical, I tried to apply max-width, but the text gets out of the block (again - logical). Can anyone tell me if there is a normal solution in pure css? For such a (relatively) trivial task, I would not want to use JS to set the width.

Answer 1

Here is the menu with max-width (option 2): https://codepen.io/abnmt/pen/MVpjjr
Nothing pops up, long text wraps.