I am experiencing an issue with conflicting color schemes in a nested ul menu. The main menu items are all white, and the top menu item links turn orange on hover as intended. However, the sub menu items need to have white text on an orange background (which is working), but then switch to a blue background on hover while keeping the text white. Unfortunately, my attempts to achieve this without affecting other elements have been unsuccessful.
Below is the code. How can I ensure that the sub menu links stay white on hover?
<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;
}
/* My attempt to keep the links white, which 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>