How to make width of dropwdown items Flexible?

http://www.lwis.net/free-css-dro开发者_如何学Cp-down-menu/dropdown.simple.horizontal.html

in this sample width of dropdown is fixed

ul.dropdown ul {
margin-top:1px;
width:150px;}

I need width of drop-down dependable of Character inside <a> without breaking in 2 line

width should depend on text.

The following two additional style declarations in Firebug gave me the results you're asking for.

ul.dropdown ul
{ width: auto; }

ul.dropdown ul li
{ white-space: nowrap; }

Set a min / max width, or, not set a width at all (and add some padding)?

min-width{10px;}
max-width{15px;}

I know min/max-width will not be supported in IE7 or below

Block level elements don't collapse down to the width of the contents. You might be able to get around this with inline-block, but that could get tricky.

Might be best to use javascript to calculate the width based on the widest LI. Let it load sans a specific width, have javascript kick in looping through each <a> in each <li> to find the widest, and then set the UL to that specific width.