Title: Смена цвета фона в меню и выпадающем меню при наводке н Last modified: 31.07.2016 --- # Смена цвета фона в меню и выпадающем меню при наводке н * Решено [karimova](https://ru.wordpress.org/support/users/karimova/) * (@karimova) * [12 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/) * Я пытаюсь добиться того, чтобы при наводке курсором, каждая отдельная кнопка в меню изменяла цвет на свой определенный. И каждое выпадающее меню тоже имело свой цвет. Насколько я понимаю, надо использовать item-menu, но у меня ну ни как не получается прописать код как следует. * Например в firebug я вижу что Остеопатия id=»menu-item-2370″, выпадающее меню Что такое Остеопатия id=»menu-item-2416″ * Для меню Остеопатия цвет должен быть при наводке #95C11E Для выпадающего меня Что такое остеопатия #B9D26C. * Я так пониаю, в коде должно быть что-то вроде: #header-v3 #navigation ul li a:hover, #header-v3 #navigation ul li.sfHover a { background:none repeat scroll 0 0 ….; } * Очень прошу помочь! Просмотр 15 ответов — с 1 по 15 (всего 17) 1 [2](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/page/2/?output_format=md) [→](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/page/2/?output_format=md) * [Pixelix](https://ru.wordpress.org/support/users/pixelix/) * (@pixelix) * [12 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/#post-121247) * `#menu-item-2370:hover{color:#95C11E;}` Тогда при наведении на элемент с id menu-item-2370 цвет текста внутри этого элемента будет меняться на #95C11E. Остальное по аналогии, меняя селектор и код цвета. * Автор [karimova](https://ru.wordpress.org/support/users/karimova/) * (@karimova) * [12 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/#post-121254) * не меняется :((( не надо ли там куда-то поставить? #header-v3 #navigation ul li a: и ul li.sfHover a * [Pixelix](https://ru.wordpress.org/support/users/pixelix/) * (@pixelix) * [12 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/#post-121337) * Нет, это не обязательно. Селектора по id вполне достаточно. Если только вы правильно его указали и он не перекрывается другими стилями. * Автор [karimova](https://ru.wordpress.org/support/users/karimova/) * (@karimova) * [12 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/#post-121341) * Я уже все id попробовала 🙁 с данным кодом ничего не меняется *начинает тихо биться головой об клавиатуру * [Pixelix](https://ru.wordpress.org/support/users/pixelix/) * (@pixelix) * [12 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/#post-121342) * Не надо пробовать все id. Надо найти id или class нужного пункта меню. Возможно, код чем-то перебивается. Попробуйте `!important` перед точкой с запятой. * Автор [karimova](https://ru.wordpress.org/support/users/karimova/) * (@karimova) * [12 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/#post-121345) * попробовала !important — не реагирует вот этот код может перебивать? ‘#header- v3 #navigation ul li a, #header-v3 #navigation ul li a { background: #9D9C9C; color:#FFFFFF; }’ * [Pixelix](https://ru.wordpress.org/support/users/pixelix/) * (@pixelix) * [12 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/#post-121346) * Возможно. Я же не знаю структуру вашей темы. И не знаю, правильно ли вы задаёте селектор. Дайте ссылку на сайт. * Автор [karimova](https://ru.wordpress.org/support/users/karimova/) * (@karimova) * [12 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/#post-121348) * [http://barrix-segers.be/](http://barrix-segers.be/) спасибо * [Pixelix](https://ru.wordpress.org/support/users/pixelix/) * (@pixelix) * [12 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/#post-121349) * Нужно после селектора с id добавить `a` и оставить `important`. Пример: `#menu- item-2370:hover a{color:red !important;}` Так работает. При наведении на второй пункт меню текст становится красным. * Можно править и напрямую стили меню. Но такой вариант хорош тем, что ваши правки лежат в одном месте. И вы можете их удалить без необходимости восстанавливать предыдущие значения. Хотя вообще в принципе `important` только на крайний случай. * Автор [karimova](https://ru.wordpress.org/support/users/karimova/) * (@karimova) * [12 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/#post-121350) * Урррра!!! Уррраа!! Зафурычило!!! Можно еще вопросик? Как с выпадающим меню обходиться? Сменой селектора ведь тут не обойтись? * [Pixelix](https://ru.wordpress.org/support/users/pixelix/) * (@pixelix) * [12 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/#post-121351) * Обойтись. * Автор [karimova](https://ru.wordpress.org/support/users/karimova/) * (@karimova) * [12 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/#post-121352) * не срабатывает 🙁 * [Pixelix](https://ru.wordpress.org/support/users/pixelix/) * (@pixelix) * [12 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/#post-121353) * `li#menu-item-2416:hover{background:red;}` * Автор [karimova](https://ru.wordpress.org/support/users/karimova/) * (@karimova) * [12 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/#post-121354) * буду в Питере, куплю Вам пива, если Вы не против )) спасибо за помощь)) цвет появился, только весь блок не закрывает…(( * [Pixelix](https://ru.wordpress.org/support/users/pixelix/) * (@pixelix) * [12 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/#post-121355) * Пиво я не пью. =) Но пожалуйста. * А вот так убрать границы: * ``` ul.sub-menu{padding:0 !important;} #navigation .sub-menu li {padding:10px !important;} ``` Просмотр 15 ответов — с 1 по 15 (всего 17) 1 [2](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/page/2/?output_format=md) [→](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/page/2/?output_format=md) Тема «Смена цвета фона в меню и выпадающем меню при наводке н» закрыта для новых ответов. ## Метки * [CSS](https://ru.wordpress.org/support/topic-tag/css/) * [hover](https://ru.wordpress.org/support/topic-tag/hover/) * Форум: [Темы и шаблоны](https://ru.wordpress.org/support/forum/themes-and-templates/) * 17 ответов * 2 участника * Последний ответ: [Pixelix](https://ru.wordpress.org/support/users/pixelix/) * Последняя активность: [12 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%86%d0%b2%d0%b5%d1%82%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d0%b2-%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b8-%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%bc-%d0%bc%d0%b5/page/2/#post-121364) * Статус: решённая ## Темы ### Самые популярные темы ### Темы без ответов ### Без вопроса ### Решённые ### Нерешённые ### Все темы