获取带有菜单的活动父项目为白色

Question

JS小提琴here：

我希望活动的和悬停的文本项都有白色文本。现在只有悬停的项目按预期运行。所以我尝试添加：

 .dropdown > ul li a:hover, .dropdown ul li.current_page_item a {
  color: white;}

我希望看到活动菜单项有橙色文本以及悬停的文本。但看起来像添加此效果也可以删除下拉行项目。如何隔离以排除这种影响？

例如，如果您将上面的CSS片段添加到js小提琴并点击运行，请查看下拉菜单中会发生什么。屏幕截图：

下拉列表中的项目不应包含白色文本，样式仅用于影响悬停和活动菜单项。

如何添加CSS以使其只有活动和悬停的项目具有白色文本（与橙色背景形成对比）？

Answer 1

这只是使用direct child combinator, >隔离样式的问题。

Updated Example

.dropdown ul li.current_page_item > a,
.dropdown > ul li > a:hover {
    color: #fff;
}

如果您希望文本在将鼠标悬停在整个li元素上时更改颜色，请使用选择器：

.dropdown > ul li:hover > a 

Example Here