PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

многоуровневое меню

Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS (Модераторы: ALEN, armancho7777777)

Страниц (1): [1]

Описание: многоуровневое меню

Поиск в теме | Версия для печати

3d_killer	Отправлено: 21 Июня, 2014 - 11:17:33
Участник Покинул форум Сообщений всего: 1916 Дата рег-ции: Апр. 2011 Откуда: Ростов-на-Дону Помог: 21 раз(а)	сделал 3х уровневое меню для каталога не пойму как сделать чтобы активный пункт (на котором находимся) не действовал hover вот тест http://share-know[dot]ru/ "И еще куча фигни" это активный пункт все кроме него работает правильно, при наведении он не должен менять background (Добавление) CODE (html): скопировать код в буфер обмена <style> .catalog_tree{ padding-left:15px; padding-top:5px;} .catalog_tree li{line-height:35px; list-style:none; border-bottom:1px solid #eeeeee;} .catalog_tree li a{font-size:16px; color:#09C; display:block;width:98%; background-image:url(/image/arr_catalog.png); background-position:right center; background-repeat:no-repeat; text-decoration:none;} .catalog_tree li a span{ background-image:url(/image/tick_catalog.png); background-position:center center; background-repeat:no-repeat; padding:0px 5px 0px 15px;} .catalog_tree ul{ padding:5px 0px 5px 5px;} .catalog_tree li li{line-height:20px; list-style:none;border-bottom:0px;} .catalog_tree li li a{font-size:13px; color:#787878;display:block;width:98%; background-image:none; text-decoration:none;} .catalog_tree li li a span{background-image:url(/image/tick_catalog_lvl2.png);} .catalog_tree ul ul{ padding-left:10px} .catalog_tree li li li{line-height:16px; list-style:none; border-bottom:0px;} .catalog_tree li li li a{font-size:10px; color:#000;display:block;width:98%; background-image:none; text-decoration:none;} .catalog_tree li li li a span{background-image:url(/image/tick_catalog_lvl3.png);} /НАВЕДЕНИЕ МЫШИ/ .catalog_tree li:hover{background-image:url(/image/catalog_button.png); background-repeat:no-repeat;} .catalog_tree li:hover .catalog_a{background-image:url(/image/arr_catalog_down.png); color:#FFF; width:96%;} .catalog_tree li:hover .catalog_span{background-image:url(/image/tick_catalog_while.png);} /НАВЕДЕНИЕ БЕЗ РЕАКЦИИ/ .catalog_tree li li:hover{ background-image:none;} .catalog_tree li li a:hover{ text-decoration:underline;} .catalog_tree li li li:hover{background-image:none;} /НАВЕДЕНИЕ/ .catalog_tree a:hover{ } /АКТИВНЫЙ ЭЛЕМЕНТ/ .catalog_li_act{background-image:url(/image/catalog_button_2.png); background-repeat:no-repeat;} .catalog_li_act:hover{background-image:url(/image/catalog_button_2.png);} .catalog_li_act .catalog_a_act{background-image:url(/image/arr_catalog_down.png); color:#09C; width:96%;} .catalog_li_act .catalog_span_act{background-image:url(/image/tick_catalog_while.png);} </style> CODE (html): скопировать код в буфер обмена <ul class='catalog_tree'> <li><a href="" class="catalog_a"><span class="catalog_span"></span>БАССЕЙНЫ</a></li> <li><a href="" class="catalog_a"><span class="catalog_span"></span>ЕЩЕ ВСЯКАЯ ФИГНЯ</a></li> <li class="catalog_li_act"><a href="" class="catalog_a_act"><span class="catalog_span_act"></span>И ЕЩЕ КУЧА ФИГНИ</a> <ul> <li><a href=""><span></span>Бетонные бассейны</a></li> <li><a href=""><span></span>Композитные бассейны</a></li> <li><a href=""><span></span>Сборные бассейны</a> <ul> <li><a href=""><span></span>Овальной формы</a></li> <li><a href=""><span></span>Круглой формы</a></li> <li><a href=""><span></span>Квадратной формы</a></li> <li><a href=""><span></span>Прямоугольной формы</a></li> <li><a href=""><span></span>Надувные бассейны</a></li> </ul> </li> <li><a href=""><span></span>Химия для бассейна</a></li> <li><a href=""><span></span>Водопады для бассейнов</a></li> <li><a href=""><span></span>Лестницы для бассейнов</a></li> </ul> </li> <li><a href="" class="catalog_a"><span class="catalog_span"></span>ВАННЫ</a></li> <li><a href="" class="catalog_a"><span class="catalog_span"></span>ХОЛОДИЛЬНИКИ</a></li> <li><a href="" class="catalog_a"><span class="catalog_span"></span>ОСВЕЩЕНИЕ</a></li> <li><a href="" class="catalog_a"><span class="catalog_span"></span>ТРУБЫ</a></li> <li><a href="" class="catalog_a"><span class="catalog_span"></span>ПЛИТКА</a></li> </ul> (Добавление) вроде прописан отдельный класс ему: CODE (html): скопировать код в буфер обмена <li class="catalog_li_act"><a href="" class="catalog_a_act"><span class="catalog_span_act"></span>И ЕЩЕ КУЧА ФИГНИ</a> и что делать при наведении: CODE (html): скопировать код в буфер обмена .catalog_li_act{background-image:url(/image/catalog_button_2.png); background-repeat:no-repeat;} .catalog_li_act:hover{background-image:url(/image/catalog_button_2.png);} (Добавление) а вот так CODE (html): скопировать код в буфер обмена .catalog_tree li:hover:not(.catalog_li_act){background-image:url(/image/catalog_button.png); background-repeat:no-repeat;} работает, но начинает действовать на 2 и третий уровень, как сделать не пойму

3d_killer	Отправлено: 21 Июня, 2014 - 14:38:17
Участник Покинул форум Сообщений всего: 1916 Дата рег-ции: Апр. 2011 Откуда: Ростов-на-Дону Помог: 21 раз(а)	все нашел решение забыл про !important

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« HTML, Дизайн & CSS »

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