Skip to main content

Automatic CSS Menu Width Expansion With Spaces

Aspects of web design

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.


Sara Thornton

Sara is a Jack (or Jill) of many trades. A web designer and developer, an ethical SEO implementer, an AdWords advocate, as well as being our in house user-guide creator and trainer. In her spare time she loves a bendy/stretchy yoga session, and feels most happy when she's near the ocean (ideally with a ridiculously absorbing book).

Comments (3)

Leave a Reply

Your email address will not be published. Required fields are marked *