Question

我在嵌套的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>

Answer 1

您的其他CSS优先。添加!important代码。

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

ul li的冲突css悬停颜色

1 个答案:

JSFiddle