Изменение пункта меню при наведении курсора на него.

голоса: 0
Как сделать, что бы пункт в меню оставался активным при переходе в выпадающее меню этого пункта? То есть при перемещении курсора в выпавшее меню этого пункта, пункт основного меню не должен менять цвет на первоночальный.
Адрес сайта http://aquadom.ucoz.org
Закрыто с пометкой: Вопрос решен!
| Автор: | Категория: Меню сайта
Закрыт | | Автор: Yuri_Geruk

Ответов: 1

Голоса: +1

У вас в стилях, строка номер 545, заданы стили:

#mainmenu li a:hover, #mainmenu li a:active, #mainmenu li a.uMenuItemA {
 font: 11px/25px 'Tahoma';
 color: #ffffff;
 background: #334640;
 padding: 0px 10px;
 text-decoration: none;
 border-left: 1px solid #19372b;
 border-top: 1px solid #19372b;
 border-right: 1px solid #f1f1f1;
 border-bottom: 1px solid #f1f1f1;
 border-radius: 5px;
 -moz-border-radius: 5px;
}

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

Вам нужно заменить примерно данные стили на следующие:

#mainmenu li a.uMenuItemA {
 font: 11px/25px 'Tahoma';
 color: #ffffff;
 background: #334640;
 padding: 0px 10px;
 text-decoration: none;
 border-left: 1px solid #19372b;
 border-top: 1px solid #19372b;
 border-right: 1px solid #f1f1f1;
 border-bottom: 1px solid #f1f1f1;
 border-radius: 5px;
 -moz-border-radius: 5px;
}

#mainmenu li a:hover {background: ваш цвет фона при наведении;}
#mainmenu li a:active {background: ваш цвет фона для пункта меню активного;}

задав данные стили, должно получиться как вы хотите, а так как есть сейчас, один цвет для всего и ничего незаметно.

| Автор:

И всё таки я добился своего, пусть не в полной мере, но добился. В шаблоне 798 отредактировал меню теперь код вроде не дублируется.

Старый код:

#mainmenu {
 text-align: left;
 width: 980px;
 margin: 0px 10px;
 margin-left: 7px;
}

#mainmenu li {
 float: left;
 height: 44px;
 line-height: 44px;
}

#mainmenu li a {
 display: block;
 margin-top: 9px;
 margin-left: 5px;
 font: 11px/25px 'Tahoma';
 color: #35453f;
 padding: 0px 10px;
 text-transform: uppercase;
 border: 1px solid transparent;
 white-space: nowrap;
}

#mainmenu li a:hover, #mainmenu li a:active, #mainmenu li a.uMenuItemA {
 font: 11px/25px 'Tahoma';
 color: #ffffff;
 background: #334640;
 padding: 0px 10px;
 text-decoration: none;
 border-left: 1px solid #19372b;
 border-top: 1px solid #19372b;
 border-right: 1px solid #f1f1f1;
 border-bottom: 1px solid #f1f1f1;
 border-radius: 5px;
 -moz-border-radius: 5px;
}

.uMenuH li {float:left;padding: 0 5px;list-style:none;}

 

Отредактировал, вроде даже избежал дублирования как в первоначальном варианте. Убрал скругления углов и получилось так:

#mainmenu {
 text-align: left;
 width: 980px;
 margin: 0px 10px;
 margin-left: 0px;
}

#mainmenu li a {
 display: block;
 margin-top: 0px;
 margin-left: 0px;
 font: 12px/24px 'Tahoma';
 color: #35453f;
 padding: 10px 22px;
 text-transform: uppercase;
 border: 0px solid transparent;
 white-space: nowrap;
}

 #mainmenu li a:active, #mainmenu li a.uMenuItemA {
 font: 12px/24px 'Tahoma';
 color: #ffffff;
 background: #334640;
 padding: 10px 22px;
 text-decoration: none;
}

#mainmenu li a:hover { 
 background: #EAEA13;
 text-decoration: none;
}
.uMenuH li {float:left;padding: 0 0px;list-style:none;}

Тему можно почистить и оставить этот вариант, предложение с использованием 

#mainmenu li a:active {background: ваш цвет фона для пункта меню активного;}   в этом шаблоне не выходит ни как, во всяком случае у меня. Спасибо за помощь!!!!
смотрите пример выше как я писал, а у вас снова и старые и новые стили вместе, я писал заменить, а не оставить и то и второе
Всё сделал как вы описали. Теперь с меню стало намного лучше и выглядит прекрасно.

Теперь вот надо разобрать ся как то с поиском по сайту. Надеюсь на вашу помощь, больше пока не откого ждать!!!!

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

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

После в стилях заменить стили, что я выше писал на:

#mainmenu li a.uMenuItemA,#mainmenu li a:hover,#mainmenu li a:active {
font: 15px/25px 'Tahoma';
color: #ffffff;
padding: 14px 5px;
text-decoration: none;
border-radius: 0px;
-moz-border-radius: 5px;
background: #42BFEC;
position:relative;
top:1px;
}

либо выберите более новый последний шаблон, где таких косяков не наблюдается.

Yuri_Geruk,
Да, я с Вами  целиком и полностью согласен о выборе шаблона. буду брать другой. Да и потом отвечая на ваш коментарий хочу сказать что пунктов меню будет много поэтому и взялся за выпадающее меню.
Юрий Подчезерцев,
Как пример, выберите на первых 3 страницах самые новые, там можно подобрать что-то хорошее и переделать под себя.
...