Выпадающее меню, проблема в IE6

[irgik]

Здравствуйте! Помогите пожалуйста решить такую проблему:

Есть горизонтальное меню, с выпадающим подменю при наведении мыши. Дело в том, что пункты меню не ограничены по ширине и зависят от длины текста в них. Во всех браузерах (кроме гадского 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 */

[dber]

я вот так сделал) к сожалению конкретно код не укажу... не запомнил место,где я бился с этой проблемой))

скачать

[irgik]

я вот так сделал) к сожалению конкретно код не укажу... не запомнил место,где я бился с этой проблемой))

скачать

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

[dber]

я помню как-то боролся как раз с тем, что тебе надо... вместо position absolute сделай relation... только надо тогда чтобы само меню было на absolute, чтобы не двигало контент, который под меню находится... вроде так если не ошибаюсь

[irgik]

я помню как-то боролся как раз с тем, что тебе надо... вместо position absolute сделай relation... только надо тогда чтобы само меню было на absolute, чтобы не двигало контент, который под меню находится... вроде так если не ошибаюсь

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

[Victor Ananiev]

наверно не relation а relative

[irgik]

наверно не relation а relative

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

[dber]

стиль ul.menu li ul поменяй на

ul.menu li ul {
	display: none;
	position: absolute;
	top: 35px;
	width: 100%;
	_width:expression(this.parentNode.clientWidth);
	border-bottom: 1px solid #820010;
	background: #fff;
}

Edited February 19, 2009 by dber

[irgik]

стиль ul.menu li ul поменяй на

ul.menu li ul {
	display: none;
	position: absolute;
	top: 35px;
	width: 100%;
	_width:expression(this.parentNode.clientWidth);
	border-bottom: 1px solid #820010;
	background: #fff;
}

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

[dber]

да мне даже самому интересно стало))) вот и нашел))