移动鼠标后CSS/HTML下拉菜单消失

我有一个菜单，我的一些链接有下拉菜单。将鼠标悬停在链接上会下拉菜单，但如果我将光标移动到实际的下拉菜单上，下拉菜单将消失。 请帮忙

以下是实际菜单的CSS和HTML： CSS:

.menu-ul{
颜色：#3d3d；
文本对齐：右对齐；
浮动：对；
显示：内联；
保证金：0；
填充：15px 4px 17px 0；
列表样式：无；
}
李先生{
字体系列：柠檬牛奶；
字体大小：24px；
字体大小：粗体；
显示：内联块；
右边距：-4px；
位置：相对位置；
填充：15px 20px；
光标：指针；
-webkit转换：所有0.2秒；
-moz转换：全部为0.2s；
-ms转换：均为0.2s；
-o-过渡：均为0.2s；
过渡：均为0.2s；
}
.菜单ul li:悬停{
颜色：#0096ff；
}
.菜单{
填充：0；
位置：绝对位置；
背景色：rgba（0,0,0,0.5）；
边缘顶部：5px；
左：0；
宽度：150px；
-webkit盒阴影：无；
-莫兹盒阴影：无；
盒影：无；
显示：无；
不透明度：0；
可见性：隐藏；
-webkit transiton：不透明度0.2s；
-moz转变：不透明度0.2s；
-ms转换：不透明度0.2s；
-o-转变：不透明度0.2s；
-过渡：不透明度0.2s；
}
.菜单ul li ul li{
显示：块；
颜色：#fff；
文本阴影：0-1px0#000；
字体大小：16px；
}
.menu ul li ul li:悬停{背景色：rgba（0,0,0.9）；}
.菜单ul li：悬停ul{
颜色：#0096ff；
显示：块；
不透明度：1；
能见度：可见；
文字装饰：无；
}
.菜单ul li a{
颜色：#3d3d；
}
.菜单ul li a：悬停{
颜色：#0096ff；
}
.菜单ul li ul li a{
颜色：#fff；
}
.菜单ul li a：悬停{
颜色：#0096ff；
}

考虑在CSS中使用

选择器，因此它只在标记结构的下方查看一个级别，没有更深的层次。与您的风格相似的演示-

.class ul li{
影响内部
的所有级别。
}
.class>ul>li{
只影响第一级。
}
.class>ul>li>ul>li{
只影响第二级。
}

---

这样，您就不必不断覆盖规则。关于下拉列表消失的问题，请参见上面演示链接中的注释。

您显示的代码在我这方面工作正常，但从您的代码来看，我怀疑

。menu ul li ul{margin top:5px；}

可能是此类行为的原因。目前，它的工作只是因为第一级李有一个底部填充大于5px

如果主页标题中的li没有底部填充，则第二级ul中的上边距将在li和其中的ul子列表之间留出5px的空间。当您将鼠标从li移动到子列表时，鼠标将通过不属于列表项的5px空格区域，并且：hover将失去其效果

---

我建议将其更改为

。菜单ul li ul{padding top:5px；}

您使用什么浏览器？我在Chrome、FF和Safari中测试了你的代码。一切都很好，我在Chrome上。也许我应该给你发送我的完整CSS，如果它对你有用的话。这是完整的CSS，在我的论坛标题上一切都很好（使用相同的代码），但在我的主页标题上它不好。我很确定CSS是好的。但是您的HTML有一个额外的“/”：

它应该是

。也许这就是问题的根源。

.class ul li {
   affects all levels of <li> inside.
}

.class > ul > li {
   only affects the first level.
}

.class > ul > li > ul > li {
   only affects the second level.
}