Автоматическое растягивание по ширине пунктов выпадающего меню

[Belovsan]

Всем добрый вечер. Вот уже реально крышу несёт не могу разрешить проблему. В общем есть горизонтальное выпадающее меню. Надо сделать так, чтобы выпадающие пункты по ширине растягивались в зависимости от величины названия пункта меню. То есть, чтобы общая ширина выпадающего меню бы соотв ширине самого длинного назв пункта. Уже мучаюсь целый день никак не могу въехать, как это сделать. Вот пациент: http://verstku.narod.ru/trablmenu/index.html

Получается в две строки почему-то идут выпадающие пункты и хоть ты тресни (((. Уже просто чувтсввую, что мозг близок к взрыву. Помогите, плиз.

Спасибо.

[Belovsan]

Я прошу прощения, что так сказать, с небольшим опозданием присоединяюсь к вашей высокоинтеллектуальной беседе, господа. Просто тут у нас в Вилларрибо мне поручили сверстать макет одного дизайнера-извращенца и, собственно, поэтому, я был вынужден погрузиться с головой во весь тот мрак, который пришёл в воспалённое сознание этого гения вэб дизайна. Но теперь, к счастью, всё позади. Работа выполнена. Мозг слегка отдохнул. И простой деревенский парнишка из Вилларрибо по имени Belovsan, вновь здесь.

Мне стыдно признаваться (сейчас Миха ухмыльнётся), но я, блин, так до сих пор и не изучил JS. Да и не только JS, я вообще никаких скриптов пока не изучил. Это, каншн, минус, но я, сука, упрямый - и это плюуууус!

Итак, в данной ситуации незнание скриптов пошло мне на пользу. Ибо мне удалось найти решение данной проблемы без помощи скрипта. Честно говоря, я толком так и не понял почему всё это так у меня получилось (хотя, если честно , то кое-что понял, ну а кое-что чисто на интуитивном уровне догнал), но в нашем случае важен результат. Правильно?

Итак, слегка поковыряв свой код я выполнил три магических действия, которые помогли мне достичь нужного результата:

1. Я убрал у блока: #nav li такой параметр, как position:relative; В результате чего, мне удалось решить проблему с переносом слов в выпадающем списке.

2. Тегу #nav ul я не назначал параметр left. Ибо его нельзя назначать, так как уже #nav li не relative.

Собственно, после этих несложных действий уже всё отлично работает во всех браузерах, кроме ИЕ6 и ИЕ7. Переходим к третьему пункту.

3. Для тегов: #nav li ul li и #nav li ul li a не назначаем никакой высоты , тобишь height. Не нужна она там. И вуаля, ИЕ7 нам покорился. В нём тож всё отлично работает (Хотя для меня тут остаётся загадкой: какое отношение высота имеет к ширине? Но ИЕ7 - это клинический случай, я уже молчу об ИЕ6).

Единственное, это надо назначить принудительную ширину тегу #nav li ul и высоту тегам #nav li ul li и #nav li ul li a - для ИЕ6. Тут я не смог добиться идилии. Но учитывая то, что ИЕ6 нас вскоре покинет навсегда, можно считать, что цель достигнута, дорогие товарищи! Ура!

Насладиться результатом, вы можете, перейдя вот по этой ссылке: http://verstku.narod.ru/trablmenu/index.html

Теперь можно увеличивать или уменьшать кол-во слов в выпадающих пунктах меню - всё будет автоматом растягиваться и всё такое. Короче - красота типа )

p.s. Спасибо всем откликнувшимся на эту тему. Думаю, мы делаем доброе дело )

p.s. p.s. Кстати, а для изменения высоты пунктов меню есть такой параметр, как line-height

Edited June 1, 2011 by Belovsan

[psywalker]

Молодец, что добил всё таки эту задачу. Так и нада Моё решение тоже конечно же рабочее, но оно грамоздкое слишком + экспрешаны.

Единственный у тебя минус - это то, что теперь все браузеры полагаются на своё усмотрение насчёт вычисления левого отступа меню, как бы это опасно с одной стороны, но с другой вроде бы можно юзать

[Belovsan]

psywalker, спасибо за тёплые слова, дружище! И за твой вариант решения спасибо. Ведь иметь в арсенале два решения - это лучше, чем иметь одно или вообще ни одного. Иногда одно решение неприменимо в некоторых случаях, и здОрово, когда есть ещё один вариант. В общем, именно, надо всё дожимать до конца. Бороться и побеждать! Падать и подниматься! Присел, отдохнул, перевёл дыхание и дальше пошёл! И тогда будет достигнута вершина и одержана победа над любой задачей! Во как сказал!

Edited June 1, 2011 by Belovsan