当我尝试悬停时，CSS-子菜单消失

我查看了类似的线程并尝试了一些解决方案（

z-index

，

position

，试图识别重叠的元素），但不明白为什么每当我尝试单击子菜单项时，它就会消失。页面如下：

带有子菜单的唯一菜单选项卡是“咨询”

---

你知道问题出在哪里吗？

因为你的子菜单是

position:absolute

，上面有一个

top:40px

，这意味着

li

下面有

40px

间隙。当鼠标离开

li

并进入

40px

时，您不再将鼠标悬停在

li

上，因此不会触发

li:hover

一种解决方案是将

top

设置为父元素的100%：

.sf-menu li:hover ul {
  top: 100%;
}

---

这将减少父菜单和子菜单之间的间隔，但您可以看到现在元素之间没有间隔。

这一切归结为使用.sf menu li:hover ul、.sf menu li.sfHover ul{top:40px}设置的40px间隔

绝对定位将子菜单从文档流中拉出-尽管它作为父li的后代仍在HTML中，但它不再位于其边界内。因此，尝试将鼠标从一个移动到另一个，在靠近子菜单之前，您已经离开了li，取消了其悬停行为

如何保持相同的外观并获得您希望拥有的预期功能：

对于.sf菜单ul，不再有绝对位置。将其保存在文档流中

将小向上箭头的背景图像应用于UL。如果您想要更多的视觉空间，请在顶部添加额外的白色条纹

将背景图像/灰色应用于li。应用顶部和底部填充以获得所需的外观。（如果您不需要将边距设置为可点击区域，边距也可以。）

---

请在问题中包含您的代码，而不是链接。甚至不知道问题出在哪里。下次我会这么做，这次就这么做。你可以编辑你的问题。如果这家伙的答案解决了你的问题，请将它标记为已回答。太棒了！这很有效--鞠躬——不用担心，你可以把答案标记为正确的，这样别人就可以找到正确的答案