Как сделать ширину выпадающих элементов гибкой?

Question

http://www.lwis.net/free-css-drop-down-menu/dropdown.simple.horizontal.html

в этом примере ширина выпадающего списка фиксирована

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

Мне нужна ширина выпадающего списка, зависящая от символов внутри <a> без разбиения на 2 строки

ширина должна зависеть от текста.

Answer 1

Следующие два дополнительных объявления стиля в Firebug дали мне результаты, о которых вы просили.

ul.dropdown ul
{ width: auto; }

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

Answer 2

Элементы уровня блока не сворачиваются до ширины содержимого. Возможно, вам удастся обойти это с помощью встроенного блока, но это может оказаться непростым делом.

Лучше всего использовать javascript для вычисления ширины на основе самого широкого LI. Пусть он загружается без определенной ширины, имеет javascript для циклического прохождения каждого <a> в каждом <li>, чтобы найти самое широкое, а затем установите UL на эту конкретную ширину.

Answer 3

Установить минимальную / максимальную ширину или вообще не устанавливать ширину (и добавить некоторые отступы)?

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

Я знаю, что min / max-width не будет поддерживаться в IE7 или ниже