CSS Help, Making Menu Fluid

Question

I got some help with this menu earlier but have a different request now.

The menu works fine with fixed width but I would like the words to wrap ONLY on the top menu categories. I need to be able to have n categories and have the width be evenly distributed. Obviously n would be within reason (I am not going to have 50 categories) but I need to be able to add more and not worry about hitting my width limit.

Thanks for any help.

Link:

http://www.seth-duncan.com/Test/TestMenu.html

-Seth

Answer 1

For every top level menu item add the class 'heading' (or something similar).

Then add the following CSS to your page:

#menu li
{
    white-space: nowrap;
}

#menu .heading
{
    white-space: normal;
}