Html 创建下拉菜单

---

请看一下我的代码。所以我想要实现的是——蓝色边框，当鼠标悬停在文本下方10像素时。另外，正如你们看到的，当你们将鼠标悬停时，它会打开子菜单，但当我想进入子菜单时，它会自动关闭，因为不再在li元素上悬停。我可以通过增加高度来解决这个问题：50px；但这也使得蓝色边框位于子菜单下，箭头位于右中心位置，悬停时很难看。你能帮我解决这两个问题吗？允许在子菜单和蓝色边框上移动鼠标？

您应该使用jquery来制作动画，当用户悬停在蓝色边框上时，您可以检查子菜单是否已打开，如果未打开，如果当前已打开，则不执行任何操作

$(...).mouseover(function(){});

ul和li之间有一个空格，如果删除上下页边距和

top:51px，则该空格将打破：悬停您将访问下拉菜单

使用填充物而不是边距，这样鼠标就不会离开元素

使用JavaScript实现这一点可能更容易，但使用CSS并非不可能

编辑
它似乎只在蓝线和th sub li之间闪烁，记住这条规则：

#top-menu-wrapper #menu ul li:hover

它对所有后代李都有影响，您可能需要将其改写为2条规则，以获得直接子代，第一条规则是：

#top-menu-wrapper #menu > ul > li:hover

你能试着编辑我的例子吗？我知道如何添加显示/隐藏功能，但它不会有与当前相同的问题吗？没有理由使用JavaScript实现简单的下拉功能。看看sinsedrix的答案，它为您带来了正确的方向。好吧，它并没有解决第一个关于边框的问题，因为您可以看到边框现在位于子菜单下。并且子菜单必须在文本下方20px处开始，因此蓝色边框位于子菜单和li文本之间。添加高度：40px；对李：悬停元素和50px；to li元素几乎解决了这个问题，现在如果我将鼠标悬停在边框上，它会闪烁。当两个（或更多）元素悬停时，它可能会闪烁。好吧，没有两个元素悬停，因为只有一个li元素具有悬停效果。当你的li悬停时，下拉菜单会覆盖它吗？你能更新一下你的小提琴吗？你能把你的问题综合起来并给它一个可读的布局吗？