How to make width of dropwdown items Flexible?

Question

http://www.lwis.net/free-css-drop-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.

Answer 1

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

Answer 2

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; }

Answer 3

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.