如果悬停在其他东西上，链接颜色必须保持不变

Question

我想创建一个效果，如下所示：如果我将鼠标悬停在我的下拉菜单上，悬停的链接将显示为蓝色。当然很好，但是如果我将任何列表项悬停在下拉菜单中，蓝色链接将变回灰色。即使悬停了其他东西，如何使链接保持蓝色？

如果我不悬停它或其他东西，必须是蓝色的链接是灰色的。没事儿。如果我悬停它，它是蓝色的。这也很好，但是如果我转到菜单中的列表项（所以灰色链接是指向下拉菜单的链接），如果悬停，链接会变回灰色而不是保持蓝色。 ..

代码：

<div id="main-menu-wrap">
<ul id="menu-headmenu" class="menu-headmenu-container">
<li id="menu-item-429" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="blabla">
About us
<span class="sub"></span>
</a>
<ul class="sub-menu">
<li id="menu-item-435" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="blablbala">
Team
<span class="sub">blablabla</span>
</a>
</li>
<li id="menu-item-145" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<a href="blablabla">
haha
<span class="sub">hahaa</span>
</a>
</li>
</ul>
</li>
<li id="menu-item-407" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor">

CSS：

#menu-headmenu li a:hover {
    background: none repeat scroll 0 0 #80806E;
    color: white;
}
#menu-headmenu li li a:hover {
    background: none repeat scroll 0 0 transparent;
}
#menu-headmenu li:hover .sub-menu {
    display: block;
}
#menu-headmenu .sub-menu li {
    background: none repeat scroll 0 0 white;
    float: none;
    font-size: 14px;
    margin-bottom: 1px;
    padding: 10px;
    text-transform: uppercase;
    width: 200px;
}

Answer 1

没有 JavaScript 就无法完成您想做的事情，因为根本不存在 element:hoveredinpast 伪选择器之类的东西。一个快速的 jQuery 示例如下所示：

$('#menu-headmenu .sub-menu li').hover({
    $(this).addClass('PermaBlue');
});

只要您有一个名为 PermaBlue 的 CSS 类并设置了类似 color: blue 的内容，它就会满足您的需求。

Answer 2

试试这个：

`#menu-headmenu .sub-menu li { list-style:none;}`  add list-style in this id.

 `#menu-headmenu .sub-menu a:hover { color: #E5E5E6 !important;}`

将此代码包含到您的 css 中