How do I get an unordered list to stop word wrapping if an li is long?

Question

I have an options button that, when clicked on, will display a dropdown list right below the button (kind of like a context menu). The problem I'm running into though is that, if one of the <li> elements in the <ul> is too long, it will wrap the text:

http://img202.imageshack.us/img202/6933/optionsdk.png

Notice how the option Transfer Ownership is word-wrapped.

I know I can set a fixed width on the <ul> element that's long enough to prevent the word wrap, but I'd like it to be fluid because the option items will change depending on which page I'm on, and some pages only have short items. If I set a fixed width, those pages that only have short option items will look excessively long with too much whitespace.

Does anybody know how I can make the <ul> expand its width so that no <li> elements are text wrapping? I have a jsFiddle here that you can mess around with:

http://jsfiddle.net/6FpFP/

Answer 1

you can check out this url.

http://jsfiddle.net/6FpFP/4/

Answer 2

You can hide it nicely by adding an ellipses, and put the full text in the title so it will show up on hover,

http://jsfiddle.net/6FpFP/2/

Answer 3

Try using nowrap:

li { white-space: nowrap; }