Css 约束<；李>；背景色在<；ul>；悬停

我有一个ul，其中包含了一系列李的内容。鼠标悬停时，li的背景会改变颜色。 我遇到的问题是，如果视口缩小，导致更长的标题堆叠，则li悬停颜色会在主视图外溢出

我试着在li:hover上使用overflow:hidden，以为这样可以阻止它，但我显然误解了这一点，因为这没有什么区别

一个简单的例子是

#辅助菜单{
背景：#007dc5；
宽度：80%；
}
ul#topnav{
列表样式：无；
保证金：0自动；
高度：70像素；
显示器：flex；
对齐项目：居中；
}
ul#topnav li a{
显示：块；
文本转换：大写；
文字装饰：无；
颜色：#fff；
填充：26px 20px；
}
顶置导航a.主页：悬停{
边际：0px；
填充：0px；
背景：透明；
边框：0px无；
}
a、 猫，
ul#topnav li{
文本对齐：居中；
光标：指针；
}
ul#topnav li a：悬停{
背景色：#e6e7eb；
颜色：#007dc5；
}

将

溢出：隐藏
添加到您的
ul#topnav
规则中：

ul#topnav {
  list-style: none;
  margin: 0 auto;
  height: 70px;
  display: flex;
  align-items: center;
  overflow:hidden;
}


#辅助菜单{
背景：#007dc5；
宽度：80%；
}
ul#topnav{
列表样式：无；
保证金：0自动；
高度：70像素；
显示器：flex；
对齐项目：居中；
溢出：隐藏；
}
ul#topnav li a{
显示：块；
文本转换：大写；
文字装饰：无；
颜色：#fff；
填充：26px 20px；
}
顶置导航a.主页：悬停{
边际：0px；
填充：0px；
背景：透明；
边框：0px无；
}
a、 猫，
ul#topnav li{
文本对齐：居中；
光标：指针；
}
ul#topnav li a：悬停{
背景色：#e6e7eb；
颜色：#007dc5；
}








将
溢出：隐藏
添加到您的
ul#topnav
规则中：

ul#topnav {
  list-style: none;
  margin: 0 auto;
  height: 70px;
  display: flex;
  align-items: center;
  overflow:hidden;
}


#辅助菜单{
背景：#007dc5；
宽度：80%；
}
ul#topnav{
列表样式：无；
保证金：0自动；
高度：70像素；
显示器：flex；
对齐项目：居中；
溢出：隐藏；
}
ul#topnav li a{
显示：块；
文本转换：大写；
文字装饰：无；
颜色：#fff；
填充：26px 20px；
}
顶置导航a.主页：悬停{
边际：0px；
填充：0px；
背景：透明；
边框：0px无；
}
a、 猫，
ul#topnav li{
文本对齐：居中；
光标：指针；
}
ul#topnav li a：悬停{
背景色：#e6e7eb；
颜色：#007dc5；
}








您可以更改方法以避免固定的填充值：


#辅助菜单{
背景：#007dc5；
宽度：80%；
}
ul#topnav{
列表样式：无；
填充：0；
高度：70像素；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
ul#topnav li a{
文本转换：大写；
文字装饰：无；
颜色：#fff；
}
顶置导航a.主页：悬停{
边际：0px；
填充：0px；
背景：透明；
边框：0px无；
}
a、 猫，
ul#topnav li{
文本对齐：居中；
光标：指针；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弹性：1；
}
ul#topnav li a：悬停{
背景色：#e6e7eb；
颜色：#007dc5；
}








您可以更改方法以避免固定的填充值：


#辅助菜单{
背景：#007dc5；
宽度：80%；
}
ul#topnav{
列表样式：无；
填充：0；
高度：70像素；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
ul#topnav li a{
文本转换：大写；
文字装饰：无；
颜色：#fff；
}
顶置导航a.主页：悬停{
边际：0px；
填充：0px；
背景：透明；
边框：0px无；
}
a、 猫，
ulාtopnav li{
文本对齐：居中；
光标：指针；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弹性：1；
}
ul#topnav li a：悬停{
背景色：#e6e7eb；
颜色：#007dc5；
}








所以我使用overflow:hidden的方法是正确的，只是在错误的地方使用了它。今天学到了一些新东西。谢谢刚刚意识到这会产生不良影响。在实际使用中，这些标题会给出一个下拉列表m