我有这个CSS:
.nav > li:hover {
background: #4D2177;
color:#FFFFFF;
text-decoration:none;
}
.active {
background: #4D2177;
color:#FFFFFF;
text-decoration:none;
}
nav, ul, li, a {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.container {
width: 100%;
margin: 10px auto;
}
.toggleMenu {
display: none;
padding: 10px 15px;
color: #4D2177;
width:100%;
text-align:center;
}
.nav {
list-style: none;
*zoom: 1;
text-align: right;
}
.nav:before,.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 12em;
}
.nav a {
padding: 10px 15px;
color:#4D2177;
}
.nav li {
position: relative;
text-align: left;
}
.nav > li {
display: inline-block;
}
.nav > li > .parent {
background-image: url("/images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
color:#FFFFFF;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #4D2177;
color:#FFFFFF;
position: relative;
z-index:100;
border-top: 1px solid #ffffff;
}
.nav li li li a {
background:#f36f25;
color:#ffffff;
z-index:200;
border-top: 1px solid #ffffff;
}
@media screen and (max-width: 600px) {
.active {
display: block;
}
.nav {
border-top: none;
}
.nav > li {
display: block;
border-top: 1px solid #ffffff;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("/images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
和这个HTML:
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li><a href=""><span>Homepage</span></a></li>
<li><a href=""><span>News</span></a></li>
<li><a href=""><span>Sections</span></a>
<ul>
<li><a href=""><span>Beavers</span></a></li>
<li><a href=""><span>Cubs</span></a></li>
<li><a href=""><span>Scouts</span></a></li>
<li><a href=""><span>Explorers</span></a></li>
</ul>
</li>
<li><a href=""><span>Gallery</span></a></li>
<li><a href=""><span>Events</span></a></li>
<li><a href=""><span>Contact Us</span></a></li>
</ul>
表示水平菜单,但文本的悬停颜色不会变为白色(#FFFFFF)
我怎样才能使这个工作?
答案 0 :(得分:1)
您的目标是li
,但a
不会inherit
color
default
,除非您通过声明{{inherit
来指定color: inherit;
1}}所以请使用下面的选择器
.nav > li:hover a {
color: #fff;
}
以上选择器会定位a
hover
上li
的{{1}}元素
另一方面,您也可以使用下面的选择器
.nav > li a:hover {
color: #fff;
}
这将更改color
的{{1}}上的a
元素的:hover
如果你想指定继承..你可以像
那样做a
而且你可以使用你正在使用的选择器,它应该可以工作......
答案 1 :(得分:0)
.nav > li > a:hover {
background: #4D2177;
color:#FFFFFF;
text-decoration:none;
}
添加“&gt; a:将鼠标悬停在CSS的第一行。
你进一步覆盖了它。这是小提琴。
答案 2 :(得分:0)
答案 3 :(得分:0)