html - 仅当子菜单包裹在 div 容器中时才更改父菜单的背景颜色

Question

我有一个大型菜单，它显示包含在 div 中的子菜单以及简短的文本和图像。并非所有父菜单都有子菜单，如示例所示。

在悬停时，我只想为那些具有子菜单的父菜单项更改 background-color。

所以在我的示例中，只有 parent 一、 parent 二、 parent 三 和 parent 四 会有背景颜色为 background-color:#e5e5e5 对于其他人我不需要背景颜色，因为他们没有子菜单项。

我尝试使用伪列更改它，但我无法正确定位它，可能是我做错了什么。

我尝试过的一些 CSS

.nav>li a:hover:has (>div)
    {
       background-color:red !important;
      font-weight:bold !important;
    }
    .nav>li:has(>div)
    {
       background-color:red !important;
      font-weight:bold !important;
    }
    .nav>li:has(> a.active){
       background-color:red !important;
      font-weight:bold !important;
    }

完整的 fiddle 示例 here

我已经尝试了几个与我在 stackoverflow 上的问题类似的答案，但它们似乎没有用。

我想使用纯 css 解决方案而不是 jQuery 来做到这一点，因为 jQuery 是可能的，但我想避免使用 jQuery。

Answer 1

以下是使用子菜单定位父菜单的方法:

.nav li:nth-child(2):hover > a { background-color: aqua; }
.nav li:nth-child(3):hover > a { background-color: aqua; }
.nav li:nth-child(4):hover > a { background-color: aqua; }
.nav li:nth-child(5):hover > a { background-color: aqua; }

以下是定位子菜单的方法:

.nav li:nth-child(2):hover .dropdown { background-color: lightgreen; }
.nav li:nth-child(3):hover .dropdown { background-color: yellow; }
.nav li:nth-child(4):hover .dropdown { background-color: lightblue; }
.nav li:nth-child(5):hover .dropdown { background-color: lawngreen; }

DEMO