我查看了类似的主题并尝试了一些解决方案（z-index，position，尝试识别重叠元素）并且无法在我尝试点击子菜单项时找出原因它消失了。页面如下：
http://aboutbeingconnected.com/consulting/
包含子菜单的唯一菜单标签是＆＃39;咨询＆＃39;
问题出在哪里？
答案 0 :(得分：1)
由于您的子菜单为position: absolute且top: 40px，这意味着40px下方有li个差距。当您的鼠标离开li进入40px时，您不再悬停在li上，因此li:hover不会被触发。
一种解决方案是将top设置为父元素的100％：
.sf-menu li:hover ul {
top: 100%;
}
这将缩小父菜单和子菜单之间的差距，但您可以看到元素之间现在没有差距。
答案 1 :(得分：-1)
这一切都归结为使用.sf-menu li设置的40px差距：hover ul，.sf-menu li.sfHover ul {top：40px}。
绝对定位将子菜单拉出文档流 - 即使它仍然在HTML中作为父li的后代，它也不再位于其边界内。因此，在接近子菜单之前，尝试从一个鼠标移动到另一个鼠标，然后离开li，取消其悬停行为。
如何保持相同的外观并获得您希望拥有的预期功能：