how to set css width equal to length of longest text

Question

I have quite a challenging task.

I have this menu here... http://jsfiddle.net/K2Zzh/6/

If you hover over \'treatments\', the width for the dropdown menu is s

Answer 1

Put the width to "li" instead of "a" , and you can use padding too

.dropdown ul li {
    width: auto;
    padding:5px;
    display:block;
}​

i think it should works

Answer 2

first step: remove fixed width from .dropdown ul li a

second step: add the css li li {width:100%;}

third step: add .mainNav li a {white-space:nowrap;}

It's ready: http://jsfiddle.net/K2Zzh/10/

​

Answer 3

Try white-space: nowrap and width: auto in your .dropdown ul li a class

http://jsfiddle.net/K2Zzh/8/