Я создал подменю для веб-сайта с использованием CSS. Но я хочу изменить цвет текста меню при наведении мыши. Но когда я меняю код на "заставить его работать", меняется другой цвет текста в подменю.
Проблема 1 Код CSS
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
ul#header_menu {
list-style: none;
position: relative;
display: inline-table;
border-bottom: 1px solid #ccc;
width: 100%;
}
ul:after {
content: ""; clear: both; display: block;
}
ul li {
float: left;
padding-right: 10px;
}
ul li:hover a {
color: #1583BE;
transition: color .16s linear;
}
ul li:hover {
color: #1583BE;
transition: color .16s linear;
}
ul li a {
display: block;
color: black;
text-decoration: none;
font-size: 1.3em;
}
ul ul {
background: white;
padding: 0;
position: absolute;
top: 100%;
width: 100px;
border: 1px solid #ccc;
}
ul ul li {
border-bottom: 1px solid #ccc;
float: none;
position: relative;
list-style-type: none;
}
ul ul li a {
font-size: 1.2em;
}
ul ul li a:hover {
color: #1583BE;
transition: color .16s linear;
}
Проблема 2 Код CSS
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
ul#header_menu {
list-style: none;
position: relative;
display: inline-table;
border-bottom: 1px solid #ccc;
width: 100%;
}
ul:after {
content: ""; clear: both; display: block;
}
ul li {
float: left;
padding-right: 10px;
}
ul li:hover a {
color: #1583BE;
transition: color .16s linear;
}
ul li:hover {
color: #1583BE;
transition: color .16s linear;
}
ul li a {
display: block;
color: black;
text-decoration: none;
font-size: 1.3em;
}
ul ul {
background: white;
padding: 0;
position: absolute;
top: 100%;
width: 100px;
border: 1px solid #ccc;
}
ul ul li {
border-bottom: 1px solid #ccc;
float: none;
position: relative;
list-style-type: none;
}
ul ul li a {
font-size: 1.2em;
}
ul ul li a:hover {
color: #1583BE;
transition: color .16s linear;
}
Я добавил jsfiddle сейчас.
Проблема 1 jsfiddle
Проблема 2 jsfiddle
Я пытался заставить его работать, но не успешно. Извините за моего, иногда, плохого английского. Спасибо за ваше время.
Я работал со своей первой скрипки. Проблема заключается в том, где вы применяете :hover
. Поэтому, если вы измените там эту часть (строка 22 CSS)
ul li:hover a {
color: #1583BE;
transition: color .16s linear;
}
к этому
ul li a:hover {
color: #1583BE;
transition: color .16s linear;
}
Если я правильно понял ваш вопрос, это решит вашу проблему.