Навигация для сайта Webreference.ru

[Vlad]

Сделал навигацию для будущего сайта WebReference.Ru и столкнулся с двумя затруднениями.

1. Страшно глючит в IE7. Не прячется меню, которое должно скрываться.

2. Если убрать курсор с ссылок заголовка, фон под ними пропадает, а надо чтобы оставался. На CSS реализовать подобное проблематично, только скриптами.

Посмотреть пример здесь

http://webimg.ru/webreference/nav.html

На сайте будет применяться jQuery, можно его задействовать. За исключением IE7 в остальных браузерах работает корректно. Даже в IE6 все нормально.

[yopopt]

Влад, так верстать нельзя... Вот смотри, структура пункта твоего меню:

<li class="topmenu">
	<a href="#"><span>Рубрики</span></a>
	<ul>
		<li><a href="#">HTML (88)</a></li>
		<li><a href="#">CSS (93)</a></li>
		<li><a href="#">JavaScript (4)</a></li>
		<li><a href="#">Верстка (16)</a></li>
	   		<li class="corner"> </li>
	</ul>
</li>

Всё хорошо, однако ты вешаешь hover на <a href="#"><span>Рубрики</span></a>, и, что естественно, при отводе курсора с этого пункта, hover уже не сработает, а начинает сработаывать hover другого элемента. Вот и проподает фон под ссылками заголовка.

Решение проблемы очевидно: использовать hover на самом .topmenu, вместо ссылок. Также это решает проблему ie7, но добавляет проблем для ie6.

.nav li.topmenu:hover a span {
	background: url(images/nav_menu1.png) no-repeat 100% -50px;
	z-index: 100;
}

.nav li.topmenu:hover a {
	position: relative;
	z-index: 100;
	background: url(images/nav_menu1.png) no-repeat;
}

.nav li.topmenu:hover li a {
	background: none;
}
.nav li.topmenu a:hover {
	text-decoration: none;
}

[Vlad]

Спасибо за подсказку! Исправил код как и посоветовал, действительно, в IE7 глюки пропали. Однако появилась горизонтальная полоса под меню, от которой надо избавиться.

Обновленный вариант здесь

http://webimg.ru/webreference/nav2.html

[yopopt]

Отнесись внимательней к выложенному мной в предыдущем посте css.

Ты почему-то пропустил свойство position: relative; в блоке .nav li.topmenu:hover a, а также не заметил блок .nav li.topmenu a:hover.

[Pavel_html]

yopopt учит влада.... апокалипсис все ближе

[Vlad]

Апокалипсис станет ближе, когда мы вообще перестанем чему-то учиться.

[Vlad]

yopopt, спасибо за помощь, на свежую голову все получилось.

Работающий пример здесь

http://webimg.ru/webreference/nav3.html

Проверил в основных браузерах, работает корректно, включая IE6. Небольшие различия, конечно, имеются, но они на работоспособности никак не сказываются.