Javascript 将悬停类添加到第二级菜单链接

我有一个垂直大菜单。当您将鼠标悬停在包含子项的链接上时，它会在右侧显示另一个垂直菜单，依此类推。当您将鼠标悬停在远离这些关联子菜单的位置时，这些子菜单将隐藏，菜单将重置

我正在向父链接添加一个类，以便悬停状态保持活动状态，这很好。然而，我的问题是第二级链接有一个子菜单。我正试图做完全相同的，但与这些链接，但无论我尝试似乎没有工作

这就是我想要实现的，请注意，当第三级菜单打开时，第二级页面链接的背景是粉红色的：

这是我正在使用的JS及其附带的JSFIDLE，向您展示我目前所处的阶段：

更新

---

我不致力于我一直在修补的JS解决方案，所以CSS解决方案没有问题。我只想要一个能让它工作的解决方案。

基本解决方案，你可以用你需要的任何其他样式来补充

/*隐藏所有子列表*/
li>ul{
显示：无；
}
/*悬停列表项将导致显示子菜单*/
李：悬停>ul{
显示：块；
}
/*菜单项的默认样式*/
李{
颜色：黑色；
}
/*悬停样式对于每个菜单项，如果有更多级别，请添加更多*/
李：悬停，
ul>li>ul>li:悬停，
ul>li>ul>li>ul>li:悬停{
颜色：红色；
}

项目1


项目1 a


项目1 b


项目1 b I


项目1 b二


项目1 b三




项目1 c




项目1


项目1

简单的解决方案采用css格式，如下所示

我所做的：

.highlight:hover {
         background: pink;
}

//comment below css styles
/*.menu li a:hover,
.menu li a.go { background: pink;  }*/

• 删除您为此悬停功能添加的所有JS代码
• 将类

  highlight

  添加到悬停时需要高亮显示的所有元素（

  背景色：粉色

  ）

CSS代码：

.highlight:hover {
         background: pink;
}

//comment below css styles
/*.menu li a:hover,
.menu li a.go { background: pink;  }*/

---

使用CSS会简单得多，而且绝对没有JavaScriptaCSS解决方案能够更简单地完成这项工作。例如@JaromandaX欢迎任何解决方案！这里有一个这样：