Javascript 具有子菜单悬停效果的菜单

我的网站中有以下几行内容-，它创建了一个侧边栏菜单

当用户将鼠标悬停在包含子链接的父列表项上时，会出现一个子菜单

但是，当鼠标移到上面选择一个子链接时，它会删除子菜单中列出的项目

---

如何修改上面的代码笔，以便允许用户选择其中一个子菜单项？

这是一个适用于您的工作代码，在css下拉菜单中，尝试使用

显示：无

&

显示：块

而不是

不透明度

---

别客气。这里是解决方案-。

问题是子菜单太远，因此当您将鼠标移向父菜单时，您不再将鼠标悬停在父菜单上。根据您希望它看起来如何，您可以将子菜单移近或保持原样，但在它们之间创建一个透明的“桥梁”，以便悬停效果不会消失。感谢您的回复John。你能给我举个例子，说明我将如何创建一个透明的桥接器吗？这将是一个特别麻烦的修复程序，很容易导致可用性问题，但它基本上是一个

位置：绝对的
块，没有背景色（或0不透明度），有点像楔入间隙。您可以在顶层或子菜单上创建一个伪元素来实现它。感谢您的回复Saif。边栏需要周围的填充空间来保持网站的视觉一致性，这可能就是为什么我在子项上悬停时仍然得到相同的结果。使用
display:none
，我也会失去渐变效果。