Html SUNBNAV：悬停状态，在子元素悬停时设置父元素的样式？

我正在设计导航的样式。此导航有一个子菜单下拉菜单，该下拉菜单中可能有二级下拉菜单。本质上，我有两层子导航项

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

每个UL都有一个类，例如，父UL的.main-nav和subnav元素的.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>

您可以在以下开发人员站点上完整查看此代码：

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

---

就像我说的，我想用纯CSS解决这个问题，最好不要在任何东西上添加类。这变得很复杂，因为这个nav完全是用PHP生成的，添加更多的类会变得很糟糕。

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

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

---

这非常有效，我以前见过这个>语法，我在堆栈上找到了这个主题，供任何想知道它的功能的人使用。