导航栏Brass分类悬停时子项无法单独高亮的问题如何解决

云上老周

2026-9-30

问题原因

你现在的写法是给所有层级的li设置了hover背景，而包含Brass的父级li本身就包裹了整个二级子菜单区域，只要鼠标进入这个父li的范围（包括子菜单区域），就会触发父li的hover样式，导致整块高亮。

修复步骤

你只需要修改CSS部分的3处规则即可：

把原来加在li上的内边距移到a标签上，同时把a设为块级元素，避免hover触发父容器样式
拆分一级菜单和二级菜单的hover规则，分别对应不同层级的元素
保留原有的子菜单展开逻辑不变

完整修改后的CSS代码

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
body {
  background-color: #348899;
}
.wrapper {
  display: flex;
}
.sidebar a {
  text-decoration: none;
  color: #343642;
  /* 新增：a标签设为块级，占满整行宽度 */
  display: block;
  /* 新增：把原来li的padding移到这里 */
  padding: 15px;
}
.wrapper .sidebar {
  position: fixed;
  width: 160px;
  height: 100%;
  background-color: #979C9C;
  color: #343642;
  padding: 20px 0;
}
.wrapper .sidebar h2 {
  text-align: center;
  margin-bottom: 20px;
}
/* 修改：去掉li上的padding，已经移到a标签了 */
.wrapper .sidebar ul li {
}
.wrapper .sidebar ul li a .fas {
  width: 25px;
}
/* 修改：一级菜单hover只作用在直接子a标签上 */
.wrapper .sidebar > ul > li > a:hover {
  background-color: #B1B6B6;
  color: #fff;
}
/* 新增：二级子菜单hover样式 */
.wrapper .sidebar ul li ul li a:hover {
  background-color: #B1B6B6;
  color: #fff;
}
.wrapper .sidebar ul li ul {
  display: none;
  position: relative;
}
.wrapper .sidebar ul li:hover ul {
  display: block;
}