css drop down menu position and width

[melahi]

After  reading various tutorials I implemented drop down menus for my site and all appeared OK(ish) until I looked at it on my cell phone. Now I'm trying to figure out a neat way to get round the layout problem and hope someone can suggest a neat way to solve it...

• menu 3 shows a drop down menu using hover attribute (forgive the colors, it's garish to help me see what is what).
• alas menu 2 is too wide because I had set white-space:nowrap for the menu options and so it gets truncated on the narrow screen.
• taking off the nowrap, it's wrapping on every word and I don't really want to force it to be be width 100% because then menus with only short entries look terrible.

I tried max-width, but that didn't help. I am confident someone somewhere will have solved exactly this problem and I'm hoping to do it in without resorting to javascript.

Thanks in advance for suggestions.

 

[dsonesuk]

Identify width from side, then with calc() subtract this width from total 100% width.

[melahi]

On 1/31/2021 at 11:06 PM, dsonesuk said:

Identify width from side, then with calc() subtract this width from total 100% width.

I was as yet unaware of vars and the calc function (there is a lot to learn with this css malarkey and I really appreciate the help I have received on these forums).

I found calc() and var() vastly more flexible than the php I had been using to generate my css.

Just for the record: I've implemented my color schemes with css vars now and also the menus are working great... some of it still needs tweaking but prototype demo is here: http://ngaro.online