CODEWITHSUNDEEP
csshoverhtml-lists
solerous
solerous

Reputation: 2411

Conflicting css hover colors for ul li

I've got an issue with two clashing color schemes in a nested ul menu. The words are all white and the top menu item links need to go orange on hover (which they do). But then the sub menu items need to stay white for the letters with an orange background (which they do) but change to an blue background on hover and have the links stay white. Unfortunately I can't seem to have one without messing up the other.

Here is the code. How can I get the sub menu links to 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;
}
/* 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>

Upvotes: 0

Views: 1015

Answers (1)

Liftoff
Liftoff

Reputation: 25372

Your other CSS is taking precedence. Add the !important tag.

ul.sub_menu li a:hover {
    color: #fff !important;
}

JSFiddle

Upvotes: 1

Related Questions