Html 下拉菜单不显示'；行不通

我用一个简单的CSS下拉菜单制作了一个wordpress模板。我使用的代码是我经常使用的代码，但这一次，当您将鼠标悬停在按钮上，然后希望将鼠标悬停在出现的下拉菜单上时，下拉菜单将消失

有人知道我怎么解决这个问题吗？有什么问题吗

链接到模板：

#导航{
列表样式：无；
宽度：800px；
高度：40px；
填充：0；
保证金：0自动；
}
#导航李{
浮动：左；
位置：相对位置；
z指数：500；
显示：块；
文本对齐：居中；
利润率：0px40px；
填充物：5px；
}
#导航LIUL{
显示：无；
位置：绝对位置；
最大宽度：140像素；
顶部：40px；
左：-20px；
}
ul#分类li{
宽度：100%；
浮动：左；
保证金：0；
背景：#fff；
}
ul#a类{
填充：10px；
宽度：200px；
}
ul#分类li：悬停{
背景：#000；
}
ul#导航li:hover>ul，
#导航ul li：悬停>ul{
显示：块；/*显示下拉列表*/
}
#导航a{
字体系列：“蒙特塞拉特”；
颜色：#474747；
文字装饰：无；
字体大小：300；
字母间距：2px；
文本转换：大写；
字体大小：10px；
}
李娜：停下来{
颜色：#000；
字体系列：“蒙特塞拉特”；
}
ul#类别li a：悬停{
颜色：#fff；
}

问题在于，您的二级菜单与顶级菜单的距离太低：

#navigation li ul {
    display: none;
    position: absolute;
    max-width: 140px;
    top: 40px;/* Change this to a lower value so it overlaps or doesn't leave a gap with menu above*/
    left: -20px;
}

当光标移动到间隙时，它不再处于“悬停”状态，因此下拉列表消失。缩小间距将解决问题。

导航li ul{top:29px；}

元素的高度