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.