Jquery div：悬停正在影响下面的所有元素

这是一把小提琴的样品：

我遇到的问题是主导航悬停正在应用于子导航项。例如，如果我将列表移动到主导航div的上方，那么悬停是否会像我预期的那样工作？我不确定在这种情况下我遗漏了什么/做错了什么

<div class="main">MAIN NAV<div>
<ul class="sub">
    <li>SUB NAV 1</li>
    <li>SUB NAV 2</li>
    <li>SUB NAV 3</li>
    <li>SUB NAV 4</li>
    <li>SUB NAV 5</li>
    <li>SUB NAV 6</li>
</ul>

.main:hover, .sub li:hover {
    color: black;
    background-color: #f3ffff;
    opacity: .6;
}

主导航

副导航1
副导航2
副导航3
副导航4
副导航5
副导航6

.main:悬停，.sub li:悬停{
颜色：黑色；
背景色：#f3ffff；
不透明度：.6；
}

​ ​ ​

---

​

问题在于这条线

<div class="main">MAIN NAV<div>

---

您缺少

/

<div class="main">MAIN NAV</div>

主导航

---

您忘记关闭

主分区。请尝试以下操作：

<div class="main">MAIN NAV</div>

主导航
我猜这就是您在尝试使用.main:hover、.sub li:hover合并两个菜单时实际要寻找的效果。这些效果作为一个整体应用于主div，并且只有子菜单的文本颜色更改，而不是背景。我把它固定在上面的小提琴上。
是的。简单的问题。简单的解决方案。有时很难找到。
<div class="main">MAIN NAV</div>