html - 在下拉导航中将文本颜色设置为活动状态

Question

我创建了一个导航，您可以在其中将鼠标悬停在一个元素上，它会执行一个下拉列表，其中有更多选项可供选择。

我遇到的问题是当我选择一个元素然后将鼠标悬停在子菜单上时，主元素颜色将不会保持活动状态。我尝试添加一个活动课程，但似乎没有工作。

a:active {
    color: #F1F1F1;
}

这是一个jsFiddle这将更好地解释我遇到的问题。如果有人不介意帮我检查一下。那很好啊。

谢谢！

Answer 1

所以问题是，当您将鼠标悬停在链接本身（a元素）上时，链接的颜色就会被设置。您需要做的是使链接的颜色在您将鼠标悬停在包含链接及其子菜单的元素上时发生变化，以便当您将鼠标悬停在子菜单上时，您仍然将鼠标悬停在包含元素（li元素）上

此处使用子选择器>，这样当您将鼠标悬停在父链接上时，子菜单链接也不会受到影响。请注意，IE6 不理解>选择器；因此，如果您想让子a元素类在那么远的地方工作，则必须为它们提供类。

CSS：

.sf-menu li:hover > a {
    color: #F1F1F1;
}

JSFiddle在这里。