CSS子菜单不会显示为悬停

Question

我正在为我的网站创建侧边栏菜单。我有一个悬停问题。

从第一个顶部菜单项（“蔬菜”）开始悬停，然后按预期方式打开“蔬菜”子菜单项。

然后，当我尝试从Veggies子菜单项（“ Green Beans”）悬停到第二个顶部菜单项（“ Fruits”）时，它没有悬停在Fruits上，因此没有打开Fruits子菜单项。

我加入了一个jsfiddle：https://jsfiddle.net/5v76d08q/4/

我相信我要么需要在某个地方设置position或height属性，但不知道在哪里设置它才能起作用。

UIAccessibilityRequestGuidedAccessSession

.list-group {
  display: inline-block;
}

.list-group-submenu {
  display: none;
 }

.list-group-submenu a.list-group-item {
  color: #141C35;
  background-color: #557c83;
}

.list-group-submenu:hover,
[id^=da]:hover + .list-group-submenu {
  display: block;
}

a.list-group-item:hover {
  text-decoration: none;
  color: #FFFFFF;
  background-color: #008080;
}

我希望当我从Veggies子菜单项Green Bean悬停到Fruits时，它应该悬停在Fruits上，并同时打开Fruits子菜单项。

我希望使用纯CSS解决方案。

谢谢！