Prevent wrapping of menu items

When you don't know the width because the links can differ in width you could use display: inline-block on the list item <li> and white-space:nowrap on the list itself <ul>

http://jsfiddle.net/Frd8J/

The accepted answer did not work in my case but @Ana original answer did. I tried to add this as a comment to her answer but it would not fit. Putting a min-width on the UL as suggested, brought all of the LI items back to one line as desired, but that line extended to the right of the containing div. I added the same min-width to the parent div and I got what I wanted, all of the LI on one line within the container. As a final step, I removed the min-width from the UL (so this is a different, more general answer than Ana's) and everything still worked. In a nut shell if you make the UL nowrap in css as documented in the accepted answer and it wraps anyway, then make sure you give the list enough width so that it does not need to wrap. Another way to increase the width that also works (without using min-width) is to increase the width of the content area below the UL in the containing div. My case was a tabbed DIV, the LIs were the tabs on top. Each tab had content below it. When the content below was wide enough already the LIs stayed in one row. I could have put a min width on every tab content, but for me it worked better to put it once on the outside container. HTH.

You should set a min-width for #cssmenu > ul, one that allows all your menu items to fit.