Выделение активного пункта меню цветом

@CyberNUB · Регистрация: 04.11.2012

Студворк — интернет-сервис помощи студентам

Ребята, вот есть СSS с сайта, которым занимаюсь.
Поскажите как выделить цветом пункт меню, на который наведена мышка?
Конкретно интересует дополнительное подменю, которое выскакиевает при наведении на основные разделы в топменю.
Выделение нужно оранежвое, а шрифт при этом становится белым.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
/* =Navigation
-------------------------------------------------------------- */
#skehead  .top-nav-menu{float:right;}
#header.skehead-headernav-shrink
#skenav ul ul a { line-height: 1.2em; }
#skenav {background:none repeat scroll 0 0 transparent; 
display:block; 
margin-left:auto;  
margin-right:auto; 
border:medium none;
margin-top:0; } 
#skenav  ul > li:last-child a{margin-right:0;} 
#skenav .ske-menu, 
ul.menu 
 
{
font-size: 13px;
 margin: 0px;
 display:inline-block;
 width:auto;
 float:right;
 }
 
 #skenav .ske-menu ul.menu {list-style: none;margin: 0; }
#skenav .ske-menu .menu li,ul.menu li {float: left; position: relative;  margin-left: 0px;  list-style: none outside none;  }
#skenav a { border-bottom: 3px solid transparent;
border-top: 3px solid transparent;
color: #5A5A5A;
display: block;
font-size: 14px;
font-weight:600;
 text-transform:none;
 line-height: 94px;
 margin:0px 0px;
 padding: 0 10px;
 text-decoration: none;
 -webkit-transition:all .3s ease 0s;
 -moz-transition: all .3s ease 0s;
 -o-transition: all .3s ease 0s;
 transition: all .3s ease 0s; }
#skenav ul li:hover{z-index:999999999999;}
#skenav ul .sub-menu li ,
#skenav ul ul li {display: block; width:100%;}
#skenav ul ul 
{
box-shadow:0 3px 4px -3px #171717;
position: absolute;
top: 100%;
left: 1px;
  float: left;
  width: 250px;
  z-index: 99999;
  padding:0px 17px;
  background:rgba(255,255,255,.98);
  margin-bottom: 0;}
#skenav ul .children li:first-child, 
#skenav ul .sub-menu li:first-child { border-top: none; }
 
#skenav ul ul a
 {
 border: 0 none !important;
 color: #7C7C7C;
 font-size: 14px;
 height: auto;
 line-height: 1.2em; 
 margin: 0;
 padding: 12px 0;
 width: auto; 
 }  
#skenav ul ul a:hover{color:#7C7C7C;;}
#skenav ul ul li{ border-top: 1px dotted rgba(0,0,0,.15);}
#skenav ul ul ul.sub-menu,#skenav ul ul ul.children{  left: 100%;  top: 0px !important; border-top: 0 none;margin-top:0; }
* html #skenav ul li.current_page_item a, * html #skenav ul li.current-menu-ancestor a, * html #skenav ul li.current-menu-item a, * html #skenav ul li.current-menu-parent a, * html #skenav ul li a:hover {  color: #fff;  }
#skenav ul ul.sub-menu li.current_page_item > a { border: medium none; }
#skenav .nav-top-link-level-2{ left: 100%; }
#skenav .nav-column-links ul {left: 100% !important; top: 0 !important; display: none; }
#skenav .nav-dropdown ul .has_child:hover .nav-column-links ul{ display: block; }

Qwerty_Wasd · 06.06.2017, 23:26

CyberNUB, строка 41

Сообщение от CyberNUB

#skenav ul li:hover{z-index:999999999999;}

заменить

CSS
1
#skenav ul li:hover{background-color: orange; z-index:999999999999;}

строка 70

Сообщение от CyberNUB

#skenav ul ul a:hover{color:#7C7C7C;;}

заменить на

CSS
1
#skenav ul ul a:hover{color:white;}

@CyberNUB · 07.06.2017, 07:00 **[ТС]**

Qwerty_Wasd, Спасибо дружище!
Слушай, только некоторый момент возник:
вот сайт: http://sm-lube.ru/
Смотри, видишь, выделение не по всей области меню? Там же размеры, да нужно прописать? Не подскажешь?
Ну и белым оно что-то не хочет становится.

Qwerty_Wasd · 07.06.2017, 19:41

CyberNUB,

Сообщение от CyberNUB

Смотри, видишь, выделение не по всей области меню?

Вижу. Строка 53

Сообщение от CyberNUB

padding:0px 17px;

убрать. Будет по всей.

Сообщение от CyberNUB

Ну и белым оно что-то не хочет становится.

потому что после каждого изменения в коде - в браузере просмотр начинается с CTRL+F5.

@CyberNUB · 07.06.2017, 20:16 **[ТС]**

Qwerty_Wasd,

...в браузере просмотр начинается с CTRL+F5.

Да, спасибо, я знаю про очистку кэша, но это не поменяло сути. Я потому и написал что не поменялось на белое.

убрать. Будет по всей.

Да, справа действительно выравнивание произошло, а вот справа нет.

Qwerty_Wasd · 07.06.2017, 20:32

CyberNUB,

CSS
1
2
3
4
5
6
7
8
9
10
11
12
#skenav ul ul {
    box-shadow: 0 3px 4px -3px #171717;
    position: absolute;
    top: 100%;
    left: 1px;
    float: left;
    width: 250px;
    z-index: 99999;
    padding: 0px 17px;
    background: rgba(255,255,255,.98);
    margin-bottom: 0;
}

вытянул с сайта. padding не убран. Выравнивание текста

CSS
1
2
3
#skenav ul ul li {    
    text-align: center;
}

Добавлено через 53 секунды
a: hover у вас вообще черный цвет.

Добавлено через 3 минуты
CyberNUB, очень рекомендую модульно(по блокам) потестить свое творение. Отключить скрипты. По блокам чекать приемлемый вид страницы. По одному подключать сторонние скрипты. Чтобы убедиться, что они не глушат ваш код.

@CyberNUB · 07.06.2017, 20:36 **[ТС]**

Qwerty_Wasd,
Странно. Вот передо мной открыт CSS в редакторе:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/* =Navigation
-------------------------------------------------------------- */
#skehead  .top-nav-menu{float:right;}
#header.skehead-headernav-shrink
#skenav ul ul a { line-height: 1.2em; }
#skenav {background:none repeat scroll 0 0 transparent; 
display:block; 
margin-left:auto;  
margin-right:auto; 
border:medium none;
margin-top:0; } 
#skenav  ul > li:last-child a{margin-right:0;} 
#skenav .ske-menu, 
ul.menu 
 
{
font-size: 13px;
 margin: 0px;
 display:inline-block;
 width:auto;
 float:right;
 }
 
 #skenav .ske-menu ul.menu {list-style: none;margin: 0; }
#skenav .ske-menu .menu li,ul.menu li {float: left; position: relative;  margin-left: 0px;  list-style: none outside none;  }
#skenav a { border-bottom: 3px solid transparent;
border-top: 3px solid transparent;
color: #5A5A5A;
display: block;
font-size: 14px;
font-weight:600;
 text-transform:none;
 line-height: 94px;
 margin:0px 0px;
 padding: 0 10px;
 text-decoration: none;
 -webkit-transition:all .3s ease 0s;
 -moz-transition: all .3s ease 0s;
 -o-transition: all .3s ease 0s;
 transition: all .3s ease 0s; }
#skenav ul li:hover
{
background-color: orange;
 z-index:999999999999;
 }
 
#skenav ul .sub-menu li ,
#skenav ul ul li {display: block; width:100%;}
#skenav ul ul 
{
box-shadow:0 3px 4px -3px #171717;
position: absolute;
top: 100%;
left: 1px;
  float: left;
  width: 250px;
  z-index: 99999;
  background: rgba(255,255,255,.98);
  margin-bottom: 0;}
#skenav ul .children li:first-child, 
#skenav ul .sub-menu li:first-child { border-top: none; }
 
#skenav ul ul a
 {
 border: 0 none !important;
 color: #383737;
 font-size: 14px;
 height: auto;
 line-height: 1.2em; 
 margin: 0;
 padding: 12px 0;
 width: auto; 
 }  
1
#skenav ul ul a:hover {color:white;}
#skenav ul ul li{ border-top: 1px dotted rgba(0,0,0,.15); text-align: center;}
#skenav ul ul ul.sub-menu,#skenav ul ul ul.children{  left: 100%;  top: 0px !important; border-top: 0 none;margin-top:0; }
* html #skenav ul li.current_page_item a, * html #skenav ul li.current-menu-ancestor a, * html #skenav ul li.current-menu-item a, * html #skenav ul li.current-menu-parent a, * html #skenav ul li a:hover {  color: #fff;  }
#skenav ul ul.sub-menu li.current_page_item > a { border: medium none; }
#skenav .nav-top-link-level-2{ left: 100%; }
#skenav .nav-column-links ul {left: 100% !important; top: 0 !important; display: none; }
#skenav .nav-dropdown ul .has_child:hover .nav-column-links ul{ display: block; }

Qwerty_Wasd · 07.06.2017, 20:37

CyberNUB,

Сообщение от CyberNUB

открыт CSS в редакторе:

в каком? В консоле wordpress?

@CyberNUB · 07.06.2017, 20:38 **[ТС]**

Qwerty_Wasd,
Notepad++

Qwerty_Wasd · 07.06.2017, 20:39

CyberNUB, обратно как заливали?

@CyberNUB · 07.06.2017, 20:42 **[ТС]**

Qwerty_Wasd, Да, заливал.
Странно вообще. Открыл в WP, действительно паддинг остался. Забавная ситуация, особенно если учесть, что через FTP открывается версия без padding. Сейчас попробую прямо в WP удалить и поправить.

Qwerty_Wasd · 07.06.2017, 20:46

CyberNUB, подумайте насчет потестить по кусочкам, с самого начала. А пока вашим решением будет являться дочерняя тема, вот ссылка на мануал WP =>ТЫК<= почитайте как ее создать. И те правила CSS, что я дал используйте в ней. У нее приоритет будет выше.

@CyberNUB · 07.06.2017, 20:47 **[ТС]**

Qwerty_Wasd, Спасибо дружище!
Извини если тупые вопросы задавал, учусь вот, начальство требует всем своим филиалам сайты сделать и нанимать никого не хочет.

Qwerty_Wasd · 07.06.2017, 20:50

CyberNUB, все нормально. Этот форум создан для жадных до знаний ) Удачи.

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .

@CyberNUB 1 / 1 / 0 Регистрация: 04.11.2012 Сообщений: 91
	07.06.2017, 07:00 [ТС]
	Qwerty_Wasd, Спасибо дружище! Слушай, только некоторый момент возник: вот сайт: http://sm-lube.ru/ Смотри, видишь, выделение не по всей области меню? Там же размеры, да нужно прописать? Не подскажешь? Ну и белым оно что-то не хочет становится. 0

@CyberNUB 1 / 1 / 0 Регистрация: 04.11.2012 Сообщений: 91
	07.06.2017, 20:38 [ТС]
	Qwerty_Wasd, Notepad++ 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	07.06.2017, 20:39
	CyberNUB, обратно как заливали? 0

@CyberNUB 1 / 1 / 0 Регистрация: 04.11.2012 Сообщений: 91
	07.06.2017, 20:42 [ТС]
	Qwerty_Wasd, Да, заливал. Странно вообще. Открыл в WP, действительно паддинг остался. Забавная ситуация, особенно если учесть, что через FTP открывается версия без padding. Сейчас попробую прямо в WP удалить и поправить. 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	07.06.2017, 20:46
	CyberNUB, подумайте насчет потестить по кусочкам, с самого начала. А пока вашим решением будет являться дочерняя тема, вот ссылка на мануал WP =>ТЫК<= почитайте как ее создать. И те правила CSS, что я дал используйте в ней. У нее приоритет будет выше. 0

@CyberNUB 1 / 1 / 0 Регистрация: 04.11.2012 Сообщений: 91
	07.06.2017, 20:47 [ТС]
	Qwerty_Wasd, Спасибо дружище! Извини если тупые вопросы задавал, учусь вот, начальство требует всем своим филиалам сайты сделать и нанимать никого не хочет. 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	07.06.2017, 20:50
	CyberNUB, все нормально. Этот форум создан для жадных до знаний ) Удачи. 0

Выделение активного пункта меню цветом

Решение