Question

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

所以这是normal状态。没有徘徊，也没有任何徘徊。它是灰色的，很好。如果我悬停例如FAQ，那么它将变为蓝色。那也没关系......但是现在。如果我将鼠标悬停在FAQ上，我会看到一个下拉列表。然后，如果我将鼠标悬停在列表项上，那么蓝色的FAQ消息将获得GREY。我希望它保持BLUE。

如上所述..我想让FAQ变成蓝色。我想这与父类或活动状态有关？我怎样才能做到这一点？这是我的代码：

<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">
faq
<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">
no
<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">
<a href="blablablabla">
blablbala
<span class="sub"></span>
</a>
<ul class="sub-menu">
<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom">
</ul>
</div>

CSS：

#main-menu-wrap {
    position: absolute;
    top: 150px;
    z-index: 9999;
}

#menu-headmenu li .sub-menu {
    border-top: 15px solid #80806E;
    display: none;
    position: absolute;
    z-index: 9999;
}
.home #menu-headmenu li a:hover {
    background: none repeat scroll 0 0 black;
    color: #1CBBED;
}
.home #menu-headmenu li li a:hover {
    background: none repeat scroll 0 0 transparent;
}
#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;

Answer 1

根据您的代码，替换此规则：

#menu-headmenu li a:hover {
    background: none repeat scroll 0 0 #80806E;
    color: white;
}

使用：

#menu-headmenu li a:hover, #menu-headmenu li:hover a {
    background: none repeat scroll 0 0 #80806E;
    color: white;
}

Demo

Answer 2

而不是puttin：将鼠标悬停在链接上，将其放在列表项上。例如：

.home #menu-headmenu li:hover {...}

Answer 3

你可以使用这个css代码来处理这个问题：

.menu-item:hover a:first-child
{
    background: #80806E;
    color:#fff;
    text-decoration:none;
}

最好的问候

如果列表项被打开/悬停，则父链接必须具有不同的颜色

3 个答案: