Html 为什么我的菜单悬停效果在悬停的第二步菜单上消失？

所以我现在甚至不知道如何简单地解释我的问题。我有简单的两步菜单。当您将鼠标悬停在菜单的第一步时，悬停的元素将更改颜色，菜单的第二步将出现。我的问题是： 当我将鼠标悬停在第一步菜单元素的第二步（您将鼠标悬停以显示第二步）时，将颜色更改为默认值，就像将鼠标悬停在第一步上一样。 例如：第一步的一个元素称为ipsum。当我将鼠标悬停在“ipsum”上时，会出现第二步菜单，“ipsum”会改变其颜色。当我将鼠标悬停在刚刚出现的第二步菜单上时，“ipsum”将颜色更改为菜单的默认颜色。 我试图找出它为什么会发生，但我不知道

*{
填充：0；
保证金：0；
}
/*主菜单*/
.菜单{
列表样式类型：无；
文本对齐：居中；
文本转换：大写；
字体系列：“Courier New”，Courier，monospace；
背景颜色：浅灰色；
}
/*菜单中的所有链接*/
.菜单a{
文字装饰：无；
颜色：#404040；
字号：700；
过渡：背景色0.8s；
}
.菜单>李{
显示：内联块；
字号：1.5em；
}
.菜单>李>a{
显示：块；
填充：10px 12px；
}
.menu>li>a:悬停{
背景色：#阿巴巴；
}
/*第二步菜单*/
.sStep{
位置：绝对位置；
/*为了更好地“淡入”*/
可见性：隐藏；
不透明度：0；
过渡：可见性0.5s，不透明度0.5s线性；
列表样式类型：无；
背景色：#阿巴巴；
}
.sStep>li{
字体大小：0.75em；
边框底部：1px实心#444；
}
.sStep>li：最后一个孩子{
边界：无；
}
.sStep>li>a{
显示：块；
填充：10px；
}
.sStep>li>a:悬停{
背景色：#909090；
}
/*“渐隐悬停”*/
.menu>li:hover>.sStep{
能见度：可见；
不透明度：1；
}

菜单2

更改此位：

.menu > li > a:hover {
  background-color: #ababab;
}

为此：

.menu > li:hover > a {
  background-color: #ababab;
}

他们的关键是，当您将鼠标悬停在

包括子菜单上的任何位置时，希望

悬停

状态受到影响

演示如下：

*{
填充：0；
保证金：0；
}
/*主菜单*/
.菜单{
列表样式类型：无；
文本对齐：居中；
文本转换：大写；
字体系列：“Courier New”，Courier，monospace；
背景颜色：浅灰色；
字体大小：0；/*删除内联块之间的间距*/
}
/*菜单中的所有链接*/
.菜单a{
文字装饰：无；
颜色：#404040；
字号：700；
过渡：背景色0.8s；
}
.菜单>李{
显示：内联块；
字体大小：1.5rem；/*从em更改为rem*/
}
.菜单>李>a{
显示：块；
填充：10px 12px；
}
.menu>li:悬停>a{
背景色：#阿巴巴；
}
/*第二步菜单*/
.sStep{
位置：绝对位置；
/*为了更好地“淡入”*/
可见性：隐藏；
不透明度：0；
过渡：可见性0.5s，不透明度0.5s线性；
列表样式类型：无；
背景色：#阿巴巴；
}
.sStep>li{
字体大小：0.75em；
边框底部：1px实心#444；
}
.sStep>li：最后一个孩子{
边界：无；
}
.sStep>li>a{
显示：块；
填充：10px；
}
.sStep>li>a:悬停{
背景色：#909090；
}
/*“渐隐悬停”*/
.menu>li:hover>.sStep{
能见度：可见；
不透明度：1；
}

我还有一个问题：当我运行snippet时，我注意到每个菜单元素之间的间隙很小。你能给我解释一下吗？提前感谢您的回答。@Daniel1490我在演示中编辑了两行代码，以说明如何消除内联块元素之间的间隙。我将

font-size:0

添加到

.menu

（因此元素之间的空格不占空间），然后在

.menu>li

中将

font-size:1.5em

更改为

1.5rem

。