如何阻止CSS导航栏hover效果作用于下拉子菜单？

问题核心是当前CSS选择器范围过广，.nav-list a会选中所有嵌套在.nav-list下的<a>标签，包括子菜单里的链接，导致主菜单的hover样式（文字变色、底部下划线）被继承到子菜单。

解决方案：用精确的子元素选择器限定主菜单样式 #

通过>直接子元素选择器，仅给一级菜单的链接应用hover效果，避免影响子菜单。需修改以下CSS规则：

1. 将主菜单的基础样式选择器从.nav-list a改为.nav-list > li > a
2. 对应的hover伪类和伪元素选择器同步修改为.nav-list > li > a:hover和.nav-list > li > a::after

修改后的完整CSS代码 #

nav {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 8rem;
  border-bottom: 1px solid black;
}

.nav-list {
  display: flex;
  width: 100%;
}

.nav-list li {
  line-height: 8rem;
  position: relative;
}

.sub-menu li {
  color: #c40707;
  line-height: 7rem;
}

/* 仅针对一级菜单的链接 */
.nav-list > li > a {
  display: block;
  color: black;
  padding: 0 1.5rem;
  font-size: 1.4rem;
  text-transform: uppercase;
  transition: color 300ms;
}

/* 一级菜单链接的下划线伪元素 */
.nav-list > li > a::after {
  content: "";
  position: absolute;
  background-color: #ff2a00;
  height: 3px;
  width: 0;
  left: 0;
  bottom: 15px;
  transition: 0s;
}

/* 一级菜单hover时的下划线效果 */
.nav-list > li > a:hover::after {
  width: 100%;
}

/* 一级菜单hover时的文字变色 */
.nav-list > li > a:hover {
  color: #e3dedd;
}

.sub-menu a {
  color: #7e7978;
  font-size: 1.5rem;
  font-weight: 200;
}

.sub-menu {
  width: 20rem;
  display: block;
  position: absolute;
  visibility: hidden;
  z-index: 500;
  background-color: rgb(255, 255, 255);
  box-sizing: border-box;
  top: 2rem;
}

.nav-list li:hover>.sub-menu {
  top: 7.5rem;
  opacity: 1;
  visibility: visible;
}

原理说明 #

>选择器仅匹配父元素的直接子元素，.nav-list > li > a仅指向.nav-list下第一级<li>里的直接<a>标签（即主菜单的"Men"链接），不会选中子菜单.sub-menu里的嵌套<a>标签，从而把hover效果严格限定在主菜单上，子菜单样式不受影响。

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