Html 鼠标悬停时，下拉菜单消失

我的下拉菜单有问题，当我将鼠标悬停在上面时，下拉菜单就会消失。在这件事上，如果有任何帮助，我将不胜感激

*{
保证金：0；
填充：0；
}
.clearfix:之后{
明确：两者皆有；
内容：“.”；
显示：块；
身高：0；
可见性：隐藏；
}
/*菜单*/
标题>隐藏：之前{
显示：块；
内容：“；
高度：30px；
宽度：30px；
背景：黑色url（burger.gif）不重复0；
背景尺寸：包含；
位置：绝对位置；
顶部：20px；
左：0px；
边际：0px；
}
标题>导航{
显示：无；
位置：绝对位置；
文本对齐：左对齐；
顶部：50px；
左：0；
宽度：200px；
高度：193px；
背景色：rgba（0,0,0,0.5）；
z指数：999；
}
标题>导航>ul{
列表样式类型：无；
保证金：0；
填充：0；
}
收割台>导航>ul>垂直高度{
位置：相对位置；
浮动：无；
底部：0；
右：0；
背景：url（menu.png）不重复右上角；
背景尺寸：包含；
}
标题>导航>ul>li>a{
字号：1em；
字体大小：粗体；
文字装饰：无；
颜色：白色；
保证金：0px 59px 0px 0px；
显示：内联块；
线高：48px；
填充：0px 24px；
宽度：60%；
空白：nowrap；
}
标题>导航>ul>li>a:悬停{
背景色：rgb（146,0,0）；
}
标题>隐藏：悬停+导航{
显示：块；
}

为了防止在尝试将鼠标悬停在链接项上时隐藏菜单，您需要使用

：hover

再添加一条CSS规则，当您将鼠标悬停在其中一个链接上时，该规则使菜单可见

这可以通过添加以下CSS来实现：

header>hide:hover + nav,
header>nav:hover {
        display: block;
 }

注意我添加的

标题>nav:hover

。这样可以确保当您将鼠标悬停在

nav

元素上时，它是可见的

---

以下是更新的fiddle的链接：

提示关于此问题，有时请确保顶部li项和子列表之间没有间隙，例如，如果为顶部li项指定边距，可能会导致问题，删除边距解决我的问题