我在嵌套的ul菜单中遇到了两个冲突的配色方案的问题。单词都是白色的，顶部菜单项的链接需要在悬停时变成橙色(它们确实是这样做的)。但是，子菜单项需要为带有橙色背景的字母保持白色(他们确实是这样做的)，但在悬停时改为蓝色背景，链接保持白色。不幸的是，我似乎不能在不搞乱另一个的情况下拥有一个。
下面是代码。我怎么能让子菜单链接保持白色悬停?
<html>
<head>
<style>
a:link, a:visited {
color: #3e82ef;
}
a:hover, a:active {
color: #de9921;
}
#topBar {
position: absolute;
z-index: 10;
top: 0px;
width: 960px;
text-align: left;
color: #fff;
}
#topBar li {
display: inline-block;
font-size: 18px;
}
#topBar a, #topBar a:link, #topBar a:visited {
font-color: #1047A0;
color: #fff;
}
#topBar a:hover, #topBar a:active {
color: #de9921;
}
ul.dropdown {
list-style: none;
position: relative;
z-index: 10;
margin: 0px;
}
ul.dropdown li {
float: left;
zoom: 1;
background: #000;
margin: 0px;
}
ul.dropdown li a {
display: block;
padding: 10px 18px;
color: #fff;
}
ul.dropdown li:hover {
position: relative;
}
ul.sub_menu li:hover {
background: #2b94c8;
color: #fff;
}
/* here is my attempt to keep the links white, but it isn't working */
ul.sub_menu li a:hover {
color: #fff;
}
</style>
</head>
<body>
<div id="topBar">
<ul class="dropdown">
<li> <a href="/webhome/about/">About</a> </li>
<li> <a href="/webhome/research/">Staff</a> </li>
<li> <a href="#">Capabilities</a>
<ul class="sub_menu">
<li><a href="/webhome/capabilities/one">Materials</a></li>
<li><a href="/webhome/capabilities/one">Automation</a></li>
<li><a href="/webhome/capabilities/one">Processing</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
你的其他CSS优先。添加!important标签
ul.sub_menu li a:hover {
color: #fff !important;
}