仅在子菜单包含在div容器中的情况下更改父菜单的背景颜色

Question

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

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

因此，在我的示例中，只有父母1，父母2，父母3

]和父母4的背景颜色为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;
    }
完整的小提琴示例here

我已经尝试了很少的答案，这些答案与我对stackoverflow的提问类似，但是它们似乎没有用。

我想使用纯css解决方案而不是jQuery，因为它可以使用jQuery，但我想避免使用jQuery。

我有一个超大菜单，其中显示子菜单包裹在div中以及简短的文字和图像。并非所有的父菜单都有子菜单，如示例所示。悬停时，我想更改背景颜色...

Answer 1

以下是通过子菜单定位父菜单的方法：