导航栏hover父菜单时下属子项背景色同时生效问题求助

问题原因 #

你当前将hover背景色规则绑定到了所有层级的<li>元素上，而子菜单的<ul>是嵌套在父级<li>内部的，当父级<li>触发hover状态时，整个<li>元素（包含其内部嵌套的所有子菜单内容）都会应用背景色，所以会出现父菜单悬停时所有子选项同步变色的问题。

修复步骤 #

只需要修改CSS中导航相关的规则即可：

1. 把原本加在<li>上的内边距转移到<a>标签上，避免<li>本身撑出包含子菜单的背景区域
2. 将hover背景色规则从<li>转移到<a>标签上，只有鼠标悬停在具体的链接元素上才触发背景变色
3. 调整子菜单定位规则，避免子菜单撑开父级元素导致布局错位

修复后的导航相关CSS代码 #

nav {
  color: #343642;
  background-color: #979C9C;
  float: left;
  width: 160px;
  font-weight: bold;
  height: 100%;
}
/* 给父级li加相对定位，方便子菜单定位 */
nav ul li {
  list-style: none;
  padding: 0;
  position: relative;
}
nav ul li a {
  display: block;
  text-decoration: none;
  color: #343642;
  padding: 10px; /* 把原li的内边距转移到a标签 */
}
/* 仅a标签悬停时显示背景色 */
nav ul li a:hover {
  background-color: #b1b6b6;
  color: #fff;
}
nav ul li ul {
  display: none;
  position: absolute;
  /* 以下定位参数可根据你的布局需求调整，当前设置为子菜单从父选项右侧弹出 */
  top: 0;
  left: 100%;
  width: 160px;
  background-color: #979C9C; /* 统一子菜单背景色 */
}
nav ul li:hover ul  {
  display: block;
}

如果你希望悬停父菜单展开子菜单时，父菜单本身的链接也保持高亮状态，可以额外添加以下规则：

nav ul li:hover > a {
  background-color: #b1b6b6;
  color: #fff;
}

内容的提问来源于stack exchange，提问作者user17138068