Subnav：悬停状态，样式父元​​素悬停在子元素上？

Question

我正在设计导航样式。此导航具有子菜单下拉列表，可能会在该下拉列表中显示辅助下拉列表。本质上，我有两层子导航项目。

这是我的问题：我的最外层父项上有悬停状态，我们称之为“关于我们”。它下面的下拉菜单会显示更多链接，当我将鼠标移动到此下拉列表中时，会为这些链接激活不同的悬停状态。我的问题是，“关于我们”链接上的hoverstate消失了。我希望悬停状态保持活跃状态​​。到目前为止，这个导航完全是用CSS完成的，没有使用javascript，如果可能的话我想完全坚持使用CSS。

每个UL都有一个类，例如父级UL的.main-nav和子区域元素的.main-sub-nav。

尝试创造性，我想我可以这样说（该例子假设#ccc是父母悬停状态的高亮颜色：

.main-nav li a:hover {background: #ccc;}    
.main-sub-nav li a:hover .main-nav li a {background: #ccc;}

这不起作用，我假设因为我试图从子元素引用父元素，它不明白我在做什么。是否有类似于我上面所做的方法来实现这一目标？

示例HTML结构：

<nav>
    <ul class="main-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a>
            <ul class="main-sub-nav">
                <li><a href="#">About Sub 1</a></li>
                <li><a href="#">About Sub 2</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>

您可以在以下开发网站上完整查看此代码：http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/

请注意，当您将鼠标悬停在“关于我们”上并将鼠标向下移动到子区域时，关于我们的突出显示将消失。

就像我说的那样，我想用纯CSS来解决这个问题，最好不要在任何事情上添加类。这变得很复杂，因为这个导航是用PHP完全生成的，并且添加更多类只会变得讨厌。

Answer 1

我认为这应该可以解决问题，

.main-nav > li:hover > a {background: #ccc;}   

DEMO