Выпадающее меню :hover

[Frolov]

Добрый вечер.

Суть вопроса. Есть выпадающее меню, в нормальных браузерах + 7 и 8 осле работает, в 6 - нет

div.header-middle ul.menu {
		width: 100%;
		height: 60px;
		list-style: none;
		text-align: right;
		position: absolute;
		top: 10px;
		left: 0;
	}

		ul.menu li.menu {
			border-right: 1px dashed rgb(250,130,30);
			display: inline-block;
			float: right;
			width: 8%;
			height: 100%;
			text-align: center;
			vertical-align: top;
			position: relative;
		}

		ul.menu li.menu-end {
			border: 0;
		}

			ul.menu li.menu a {
				color: rgb(10,10,10);
				font: normal 12pt Arial;
				text-decoration: none;
				display: block;
				width: 100%;
				height: 100%;
				padding: 10px 0 0 0;
			}

			ul.menu li.menu a:hover {
				color: rgb(30,130,230);
			}

			ul.menu  div.submenu {
				width: 420px;
				height: 23px;
				display: none;
				position: absolute;
				top: 70px;
				left: 0;
			}

				div.submenu div.strl {
					background: url(images/submenu-strl.png) no-repeat;
					width: 18px;
					height: 14px;
					position: absolute;
					top: -13px;
					left: 35px;
				}

				div.submenu div.radius-left,
				div.submenu div.radius-right {
					background: url(images/submenu-radius.png) no-repeat;
					width: 10px;
					height: 24px;
				}

				div.submenu div.radius-left {
					float: left;
				}

				div.submenu div.radius-right {
					background-position: -28px 0;
					float: right;
				}

				div.submenu ul.submenu {
					background: rgb(250,250,250);
					border-top: 1px solid rgb(230,230,230);
					border-bottom: 1px solid rgb(230,230,230);
					height: 22px;
					list-style: none;
					padding: 0 0 0 5px;
					text-align: left;
					overflow: hidden;
				}

					ul.submenu li {
						display: inline-block;
						padding: 0 0 0 10px;
						float: left;
					}

						ul.submenu li a {
							color: rgb(0,0,0) !important;
							font: normal 11pt Arial !important;
							text-decoration: none !important;
							padding: 2px 0 0 0 !important;
						}

						ul.submenu a:hover {
							color: rgb(35,140,215) !important;
						}

			ul.menu li.menu:hover div.submenu {
				display: block;
			}

<ul class="menu">
		<li class="menu">
			<a href="#">Инфо</a>

			<div class="submenu">
				<div class="strl"></div>
				<div class="radius-left"></div>
				<div class="radius-right"></div>

				<ul class="submenu">
					<li><a href="#">Новости</a></li>
					<li><a href="#">Пресс-релизы</a></li>
					<li><a href="#">Фирмы и товары</a></li>
					<li><a href="#">Бренды</a></li>
				</ul>
			</div>
		</li>
		<li class="menu">
			<a href="#">Акции и события</a>

			<div class="submenu">
				<div class="strl"></div>
				<div class="radius-left"></div>
				<div class="radius-right"></div>

				<ul class="submenu">
					<li><a href="#">Выставки</a></li>
					<li><a href="#">Скидки</a></li>
				</ul>
			</div>
		</li>
		<li class="menu"><a href="#">Статьи</a></li>
		<li class="menu"><a href="#">Дизайн-проекты</a></li>
		<li class="menu"><a href="#">Тендеры</a></li>
		<li class="menu menu-end"><a href="#">Форум</a></li>
	</ul><!-- /ul.menu -->

и 2-ой вопрос. Возможно уже кто-то заметил костыли. inline-block не катит в 6 и 7 осле, пришлось поставить временные костыли в виде флоата для элементов списка...впринципе можно было и на флоате все сделать, но менюшка выравнивается по правому краю, приходиться использовать float: right; ....и тут мой мозг не может успокоиться, в это случае менюшку надо переварчивать....думаю ясно....вроде и отображается все нормально и невидно это....но все же.... хочется что бы порядок кода в данном случае совпадал с порядком отображения не экране. заскок одним словом))))

[psywalker]

li.menu:hover - ховер на элементы не пашет, кроме ссылок.

[swetlana]

http://www.xs4all.nl/~peterned/csshover.html

[Frolov]

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

[Frolov]

упс, заработало....)