irgik

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

Виктор вы конечно внимательный, но это суть дела не меняет

Перепробовал все комбинации и варианты с позиционированием - результат такой же. Это жопц какойто!

Спасибо dber за твою менюшку. Но у тебя немножко другая ситуация. Твои подменю не привязываются к ширине пунктов основного меню и "живут сами по себе" . А мне нужно чтобы ширина подменю равнялась ширине пункта основного меню :'(.

Здравствуйте! Помогите пожалуйста решить такую проблему: Есть горизонтальное меню, с выпадающим подменю при наведении мыши. Дело в том, что пункты меню не ограничены по ширине и зависят от длины текста в них. Во всех браузерах (кроме гадского IE6) подменю имеет ширину родительского элемента (тоесть самого пункта меню), а в IE6 оно растягивается по всей длине меню! Я так понял, что IE6 при абсолютном позиционировании блока неправильно определяет родительский элемент. Вот ссылка на пример: ссылка на меню Код меню: <ul class="menu"> <li><a href="#">Very Long Menu Item</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li><a href="#">Standart Menu</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li><a href="#">Short</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> </ul> Стили: ul.menu { height: 39px; background: #820010; } ul.menu li { display: block; float: left; background: #820010; position: relative; } ul.menu li a { display: block; border: 1px solid #820010; padding: 7px 18px 7px 16px; text-decoration: none; color: #fff; font: 16px Arial black, Helvetica, Verdana, sans-serif; text-transform: uppercase; background: url(divide.gif) no-repeat center right; } ul.menu li.last { float: right; } ul.menu li.last a { background-image: none; } ul.menu li:hover { background: #fff; } ul.menu li:hover a { color: #820010; } /* submenu */ ul.menu li ul { display: none; position: absolute; top: 35px; width: 100%; border-bottom: 1px solid #820010; background: #fff; } ul.menu li:hover ul { display: block; } ul.menu li li { float: none; text-align: center; border-left: 1px solid #820010; border-right: 1px solid #820010; padding: 0 10px; background: #fff; } ul.menu li li a { width: 100%; border: none; font: bold 14px Arial, Helvetica, Verdana, sans-serif; padding: 5px 0; background-image: none; border-top: 1px solid #e1c1c5; } ul.menu li li:hover { background: #820010; } ul.menu li li:hover a { color: #fff; border-top-color: #820010; } /* submenu end */ /* for IE6 */ ul.menu li { _scrollbar-face-color: expression(runtimeStyle.scrollbarFaceColor = '#fff', onmouseover = function() {this.className += ' hover'}, onmouseout = function() {this.className = this.className.replace(/ hover/g, '')} ); } ul.menu li.hover { _background: #fff; } ul.menu li.hover a { _color: #820010; } ul.menu li.hover ul { _display: block; } ul.menu li li.hover { _background: #820010; } ul.menu li li.hover a { _color: #fff; _border-top-color: #820010; } /* end for IE6 */