Html 错误行为：悬停

当您将鼠标悬停在区域

上时，它将变为红色，但

您只需删除以下内容：

.menu * {
  background-color: #fff;
}

.menu ul li a:hover {
  text-decoration: none;
  color: #fff;
  background: #e50003;
}

菜单{
z指数：100；
宽度：230px；
位置：相对位置；
垂直对齐：顶部；
显示：内联块；
背景色：#fff；
}
.菜单*{
文字装饰：无；
字体大小：16px；
/*背景色：#fff*/
}
.菜单ul{
保证金：0；
左侧填充：10px；
列表样式：无；
}
李先生{
填充：3px0px 3px10px；
颜色：#000；
显示：块；
过渡：所有0.5秒缓解0.05秒；
-webkit过渡：所有0.5秒缓解0.05秒；
}
.菜单ul li a{
显示：块；
颜色：#000；
}
.菜单ul li:悬停{
背景：#e50003；
}
.菜单ul li.active>a{
文字装饰：无；
}
/*.菜单ul li a：悬停{
文字装饰：无；
颜色：#fff；
背景：#e50003；
}*/
.菜单ul li.子菜单{
显示：无；
位置：绝对位置；
宽度：100%；
最小高度：100%；
排名：0；
左：100%；
背景：ddd；
边框宽度：0px 0px 0px 1px；
边框样式：实心；
边框颜色：#bbb；
}
.菜单ul li:悬停>.子菜单{
背景色：白色；
显示：块；
位置：绝对位置；
左：220px；
宽度：250px；
排名：0；
z指数：99；
过渡：所有0.5秒缓解0.05秒；
-webkit过渡：所有0.5秒缓解0.05秒；
}

您需要设置

子元素的背景，同时将鼠标悬停在
父元素上，这就是您的情况

.menu ul li:hover,
.menu ul li:hover > a{
  background: #e50003;
  color: #fff;
}


菜单{
z指数：100；
宽度：230px；
位置：相对位置；
垂直对齐：顶部；
显示：内联块；
背景色：#fff；
}
.菜单*{
文字装饰：无；
字体大小：16px；
背景色：#fff；
}
.菜单ul{
保证金：0；
左侧填充：10px；
列表样式：无；
}
李先生{
填充：3px0px 3px10px；
颜色：#000；
显示：块；
过渡：所有0.5秒缓解0.05秒；
-webkit过渡：所有0.5秒缓解0.05秒；
}
.菜单ul li a{
显示：块；
颜色：#000；
过渡：所有0.5秒缓解0.05秒；
-webkit过渡：所有0.5秒缓解0.05秒；
}
.菜单ul li:悬停，
.菜单ul li：悬停>a{
背景：#e50003；
颜色：#fff；
}
.菜单ul li.active>a{
文字装饰：无；
}
.菜单ul li a：悬停{
文字装饰：无；
颜色：#fff；
}
.菜单ul li.子菜单{
显示：无；
位置：绝对位置；
宽度：100%；
最小高度：100%；
排名：0；
左：100%；
背景：ddd；
边框宽度：0px 0px 0px 1px；
边框样式：实心；
边框颜色：#bbb；
过渡：所有0.5秒缓解0.05秒；
-webkit过渡：所有0.5秒缓解0.05秒；
}
.菜单ul li:悬停>.子菜单{
背景色：白色；
显示：块；
位置：绝对位置；
左：220px；
宽度：250px；
排名：0；
z指数：99；
}









以上你得到了正确的答案。
只是为了标记，看起来有一个增强，使红色部分的宽度在悬停时发生变化。
更改宽度应为220px。菜单如下

.menu {
  z-index: 100;
  width: 220px;
  position: relative;
  vertical-align: top;
  display: inline-block;
  background-color: #fff;
}

.menu*
正在将
a
设置为白色背景。
li:hover
不会改变这一点，除非您也将其悬停。请考虑使用<代码>。菜单<代码>。@ MARCOSARALNO可以告诉我投票失败的原因吗？问题是一个错误的代码，他不需要修复，只是为了学习如何使用下票，我的答案只是一个不同的方法，而不是一个坏的或错误的答案。让他用100行代码做某件事比用200行代码做要好。当有更好的答案时，给他另一个表现较低的答案，只是没有任何意义向下投票是错误的答案而不是不太好的答案，如果你的答案比其他答案好，坐下来放松你的答案会自动获得向上投票，不要为了证明你的答案是最好的而否决其他答案。这可能是由我的电脑引起的。你看到了与问题相同的结果吗？尝试清理缓存对不起，我弄错了。如果子菜单>2，我们将获得菜单中面包屑的效果（所有选项在菜单的上一级保持红色）。为什么会这样？
.menu {
  z-index: 100;
  width: 220px;
  position: relative;
  vertical-align: top;
  display: inline-block;
  background-color: #fff;
}