没有应用鼠标悬停的下拉文字颜色

Question

我制作了一个固定的导航栏但似乎无法确定为什么当你将鼠标悬停在主菜单上时＃34;然后将子菜单，＆＃34;主菜单＆＃34;的文本悬停不会改变颜色吗？

#nav-top > ul > li > a:hover, .nav-top-menu-button:hover {
    background-color: #fff;
    color: #000;
}

JSFiddle：https://jsfiddle.net/owboLy2s/1/

Answer 1

您可以使用#nav-top > ul > li:hover > a, .nav-top-menu-button:hover代替#nav-top > ul > li > a:hover, .nav-top-menu-button:hover。因此，更改:hover应该向上移动一步。否则，只有<a href=''>Menu</a>代码会触发颜色更改。

Answer 2

li.nav-top-menu-button:hover a{
   color:#000!important;
}

这应该有效。 它定位到您的主li，其中包含＆＃34;菜单＆＃34;链接。由于下拉菜单仍在li内，因此在选择子链接时您仍会将其悬停。 !important只是说它优先于任何其他样式。