我发现多个解决方案都有效，但似乎没有解决这个问题。当我添加CSS和jQuery代码来执行此操作并刷新浏览器以查看它是否有效时，它确实.....。父元素的背景保持悬停状态，但文本淡化回其原始的非悬浮状态，只留下橙色（#d35400）背景（因为文本原来是那种颜色但是变成了白色当项目悬停时[#ecf0f1]。
此时我不知道该怎么做。我尝试了4-5种不同的解决方案，让父元素保持其悬停状态，但父元素的文本不会保持它应该的颜色。
我会在这里包含代码，但我担心它不允许我，因为我需要包括多少。所以这是一个链接：http://jsfiddle.net/Lmdunrzj/2/。请将鼠标悬停在“Roster”（左侧的第二个菜单项）上，然后将鼠标悬停在其任何下拉项目上。后台保持其悬停状态，但文本不会。我已经尝试了所有我能想到的东西，但我所尝试的并没有帮助（显然）。
我期待您的回复和帮助！非常感谢你！
答案 0 :(得分：1)
检查此Fiddle
我没有更改代码中的任何内容，我所做的只是包含jQuery.2.1.4，它似乎正在工作。这会让我相信你的html页面上没有jQuery资源。如果这不能解决您的问题，请告诉我更详细的信息。
这是jquery资源：
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
答案 1 :(得分：1)
如果您将:hover事件设置为<li>父级而不是<a> - 标记，则可以在悬停其他子项时保持整个导航项的悬停状态。< / p>
header div#nav-container nav#nav-menu ul#nav-items li.roster-li:hover > a {
color: #ecf0f1;
}
你可能不应该在CSS中使用那么多id（或任何）ID，因为它会使覆盖样式变得更加困难。
尝试阅读特定内容，因为它会加快开发和页面加载。 http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/ http://www.impressivewebs.com/css-specificity-irrelevant/