Automatic CSS Menu Width Expansion With Spaces
Well today we discovered a wonderfully useful piece of CSS known as “whitespace:nowrap;”. This super little piece of code solved an akward situation we were having with a problematic menu.
Here was the situation:
- Normal top bar menu with drop down sub menus.
- Drop down sub menu items have titles of varying widths, therefore each drop down sub menu block (as a whole) needs to be able to vary its width automatically depending on the length of the longest sub menu title in that block. Still with us?
- Some sub menu titles consist of more than one word (i.e. have spaces in between the words).
The Problem
- Long sub menu titles would wrap onto the next sub menu line, or run over the sub menu box graphic, into “empty space” (rather unattractive).
Requirements
- Fix needs to be in CSS only, not Javascript, etc.
The Solution
All I had to do was add the little bit of code in bold below, and all was fixed!
ul.dropdown ul {
visibility: hidden;
position: absolute;
z-index: 100;
min-width: 70px;
max-width: 340px;
white-space:nowrap;
}
Do you have a different way of resolving this problem?
If so, I’d love to know your solutions via the comment box below.
Deeds
Thanks so much!
chidori
seriously you have solved my problem. for a week i wondered what’s wrong with my sub menu. thank you so much!
Sara Thornton
Happy to help Chidori!
Thanks for letting me know that this helped you 🙂