我需要将父母菜单项突出显示，同时将鼠标悬停在其子菜单项上的level1和2.我遇到问题，因为level1和level2的链接是不同的颜色。
这种情况从未发生过，因为似乎只要鼠标离开菜单项并越过子菜单，浏览器就会将其设置为默认样式。任何帮助赞赏！非常感谢！
按照我在SCSS中的代码进行学习：
SCSS：
.menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
height: 100%;
li {
margin-left: 30px;
height: 100%;
display: flex;
align-items: center;
position: relative;
&:first-child {
margin: 0;
}
&.current_page_item a {
color: #00a7cf;
}
}
a {
color: #0a343a;
font-size: 1.4em;
letter-spacing: 0.01em;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
&:hover {
color: #00a7cf;
}
}
& > li:hover > .sub-menu {
display: block;
}
& > li > .sub-menu {
position: absolute;
top: 100%;
left: -35px;
padding: 40px 35px;
background-color: #0b4e78;
list-style: none;
z-index: 1001;
display: none;
&::before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 10px 9px;
border-color: transparent transparent #0b4e78 transparent;
position: absolute;
top: -10px;
left: 80px;
}
& > li:hover > .sub-menu {
display: block;
}
& > li > .sub-menu {
position: absolute;
left: 0;
top: 0;
padding: 40px 35px;
background-color: #0b4e78;
list-style: none;
width: calc(100% + 100vw);
min-height: 250px;
padding-left: calc(100% + 50px);
z-index: -1;
display: none;
&::before {
content: '';
height: calc(100% - 40px);
position: absolute;
background-color: rgba(255, 255, 255, .2);
width: 1px;
top: 0;
transform: translateX(-50px);
}
a {
font-size: 1.2em;
font-weight: 100;
color: #fff;
&:hover {
color: #00a7cf;
}
}
}
li {
margin: 0;
position: unset;
}
a {
color: #00a7cf;
&:hover {
color: #fff;
}
}
}
}
HTML：
<ul id="menu-principal" class="menu"><li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-20 current_page_item menu-item-has-children menu-item-71"><a href="http://localhost/ancord/">INSTITUCIONAL</a>
<ul class="sub-menu">
<li id="menu-item-80" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-80"><a href="#">INSTITUCIONAL</a>
<ul class="sub-menu">
<li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a href="http://localhost/ancord/institucional/sobre-nos/">Sobre nós</a></li>
<li id="menu-item-94" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94"><a href="http://localhost/ancord/institucional/historico/">Histórico</a></li>
<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a href="http://localhost/ancord/institucional/conselho-de-administracao/">Conselho de Administração</a></li>
<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="http://localhost/ancord/institucional/entidades-parceiras/">Entidades Parceiras</a></li>
<li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="http://localhost/ancord/institucional/estatuto-social/">Estatuto Social</a></li>
<li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90"><a href="http://localhost/ancord/institucional/principios-eticos-e-codigo-de-conduta/">Princípios Éticos e Código de Conduta</a></li>
<li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"><a href="http://localhost/ancord/institucional/noticias/">Notícias</a></li>
</ul>
</li>
<li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-79"><a href="http://localhost/ancord/comites/">COMITÊS</a></li>
<li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81"><a href="http://localhost/ancord/associados/">ASSOCIADOS</a></li>
</ul>
</li>
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-18"><a href="http://localhost/ancord/educacional/">EDUCACIONAL</a>
<ul class="sub-menu">
<li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"><a href="http://localhost/ancord/institucional/sobre-nos/">Sobre nós</a></li>
<li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="http://localhost/ancord/institucional/conselho-de-administracao/">Conselho de Administração</a></li>
<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://localhost/ancord/institucional/historico/">Histórico</a></li>
</ul>
</li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://localhost/ancord/certificacao-e-credenciamento/">CERTIFICAÇÃO E CREDENCIAMENTO</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://localhost/ancord/contato/">CONTATO</a> </li>
</ul>
答案 0 :(得分：0)
您正在寻找：
.menu-item:hover > a {
color: #00a7cf;
}
.sub-menu > li:hover > a {
color: #fff;
}
您的子菜单位于“li”标记内，因此您应将鼠标悬停在所有子菜单内容的“li”上，然后设置菜单链接的样式。
为了维护代码的结构，它看起来像这样：
.menu {
> li {
&:hover {
> a {
color: #00a7cf;
}
}
.sub-menu > li {
&:hover > a {
color: #fff;
}
}
}
}