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.
Thanks so much!
seriously you have solved my problem. for a week i wondered what’s wrong with my sub menu. thank you so much!
Happy to help Chidori!
Thanks for letting me know that this helped you 🙂