Вопросик по выпадающему меню на CSS

[Mr.Smith]

Всем привет, возник вопросик по выпадающему меню на CSS. Смотрим сайт _http://electrodance.org.ua, видим горизонтальное меню. Наводим, к примеру, на пункт "Новости", выпадает меню, переводим курсор на выпавшее меню и черный фон с ссылки "Новости" исчезает. Помогите, пожалуйста, сделать так, чтобы он не пропадал

Стили: _http://electrodance.org.ua/templates/Electrodance/css/style.css

Заранее благодарен.

[Mr.Smith]

Будут советы или примеры?

[Mr.Smith]

Вопрос решаем или стоит делать на javascript? Если второе, буду благодарен за полезные ссылки.

[tt48]

насколько я понял код, который у Вас в странице- фон изменяется при событии a: hover;

если бы он применялся к элементу списка, тогда бы фон оставался чёрным, т.к. курсор оставался бы в зоне списка.

Есть у меня что-то похожее

#menu :hover > a {

menu- id списка

[psywalker]

насколько я понял код, который у Вас в странице- фон изменяется при событии a: hover;

если бы он применялся к элементу списка, тогда бы фон оставался чёрным, т.к. курсор оставался бы в зоне списка.

Есть у меня что-то похожее

#menu :hover > a {

menu- id списка

А вот я склоняюсь к JS, давно бы уже сделал и не ждал бы ответа 5 недель

[Mr.Smith]

А вот я склоняюсь к JS, давно бы уже сделал и не ждал бы ответа 5 недель

Можно отсюда поподробнее, т.к. JS не знаю.

[psywalker]

Можно отсюда поподробнее, т.к. JS не знаю.

Вот тут уже помочь не смогу, сам не знаю этого языка

[Игорь Ермаков]

Выпадающее меню на CSS это реально, но не целесообразно, Flash, JavaScript будет намного лучше.

Ну или фреймворки типа jQuery, Moootols.

Погуглите на фразу: javascript меню.

Хотя флеш тоже очень крут.

[tt48]

.top_nav a:hover {

color: #FFFFFF;

text-decoration: underline;

background-color: #000000;

}

.top_nav :hover> a {

color: #FFFFFF;

text-decoration: underline;

background-color: #000000;

}

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

Если возникнут проблемы - попытаюсь вечерком поковыряться.

С ув. Олег.

Edited September 13, 2009 by tt48

[Mr.Smith]

Полез я почему-то в jquery и по примеру _http://anton.shevchuk.name/wp-demo/jquery-tutorials-2/drop-down.html пытался реализовать поставленню задачу, но согласно этому примеру применяется стиль active и для выпадающих пунктов, ковырялся несколько часов, но метод втыка так и пришел ко мне на помощь. Отсюда возник вопрос "реально решить поставленную задачу через jquery?", читал мануалы по js, не осилил задачу.

Вариант от tt48 работает, спасибо, но как было замечено выше, меню мерцает.

[tt48]

Полез я почему-то в jquery и по примеру _http://anton.shevchuk.name/wp-demo/jquery-tutorials-2/drop-down.html пытался реализовать поставленню задачу, но согласно этому примеру применяется стиль active и для выпадающих пунктов, ковырялся несколько часов, но метод втыка так и пришел ко мне на помощь. Отсюда возник вопрос "реально решить поставленную задачу через jquery?", читал мануалы по js, не осилил задачу.

Вариант от tt48 работает, спасибо, но как было замечено выше, меню мерцает.

Ну дык, ёлы-палы..малость поковыряться и всё путём=) :

.top_nav a {
	color: #000000;
	text-decoration: none;
	display: block;
	padding: 2px 5px 3px; /* padding: 2px 3px 3px; */
	margin-right: 5px; /* margin-right: 3px; */
	margin-left: 5px; /* margin-left: 3px; */
}
.top_nav a:hover {
	color: #FFFFFF;
	text-decoration: underline;
	background-color: #000000;
}
.top_nav :hover> a {
	color: #FFFFFF;
	text-decoration: underline;
	background-color: #000000;
}
.top_nav .level2 :hover >a {
	color: #FFFFFF;
	text-decoration: underline;
	background-color: #000000;
}
/*.top_nav .active * {
	color: #FFFFFF;
	text-decoration: underline;
	background-color: #000000;
}*/
.top_nav .level2 {
	position: absolute;
	height: 22px; /* height: 20px; */
	border: 1px solid #80B700;
	line-height: 20px; /* line-height: 18px; */
	z-index: 900;
	display: none;
	margin-left: 5px; /* margin-left: 3px; */
}
.top_nav .level2 ul {
	margin: 0px;
	padding: 0px 0px 0px 10px;
	background-color: #D7FF79;
	height: 22px; /* height: 20px; */
	white-space: nowrap;
	float: left;
}
.top_nav .level2 li {
	list-style: none;
	margin-right: 10px;
	display: inline;
	background-image: none;
	padding: 0px;
}
.top_nav .level2 a {
	display: inline;
	padding: 0px;
}
/*.top_nav .level2 a:hover {
	display: inline;
	padding: 0px;
	color: #000000;
	background-color: transparent;
}*/

Если чего еще понавороченней захотите или просто тему расшарить- погуглите pro css menus. Это архивчик 50 -100 менюшек от спецов(JavaScript тоже есть)

С ув.Олег.

Edited September 14, 2009 by tt48

[Mr.Smith]

Благодарю за помощь, работает.

Вопрос: Нужно подключать htc-файл csshover2.htc для IE6, я прав?