鼠标悬停其他菜单项时子菜单父项意外展开的问题求助

问题现象 #

使用Bootstrap模板开发侧边导航时，鼠标悬停前两个无下拉子菜单的菜单项时，第三个带下拉子菜单的父项会自动展开，手动排查CSS规则未解决问题。

问题根源 #

核心问题出在错误的CSS选择器上：

.nav-menu:hover>a {
  /* 样式规则 */
}

这个选择器表示当整个.nav-menu容器被鼠标悬停时，容器内所有直接子元素<a>都会应用样式。由于导航结构是.nav-menu > ul > li > a，当悬停前两个菜单项时，整个.nav-menu容器会触发hover状态，间接导致第三个菜单项的<a>被激活，进而触发子菜单展开逻辑。

另外还有一处语法错误：transition: 0.3 sec应为transition: 0.3s，单位写法不符合CSS规范。

修复方案 #

1. 修正错误的hover选择器 #

找到以下CSS代码块：

.nav-menu a:hover,
.nav-menu .active,
.nav-menu .active:focus,
.nav-menu:hover>a {
  color: #fff;
  background: #1a1a1a;
  border: 4px white solid;
  padding: 0 18px;
}

.nav-menu a:hover span,
.nav-menu .active span,
.nav-menu .active:focus span,
.nav-menu:hover>a span {
  color: #fff;
}

将其中的.nav-menu:hover>a替换为.nav-menu li:hover>a，修改后：

.nav-menu a:hover,
.nav-menu .active,
.nav-menu .active:focus,
.nav-menu li:hover>a {
  color: #fff;
  background: #1a1a1a;
  border: 4px white solid;
  padding: 0 18px;
}

.nav-menu a:hover span,
.nav-menu .active span,
.nav-menu .active:focus span,
.nav-menu li:hover>a span {
  color: #fff;
}

该修改确保只有当鼠标悬停在单个菜单项（<li>）上时，对应的<a>标签才会触发样式变化，避免整个导航容器hover影响其他菜单项。

2. 修复子菜单展开逻辑与样式 #

在媒体查询@media (min-width: 992px)中，修正子菜单的transition语法并优化定位：

@media (min-width: 992px) {
  /* 保留原有其他规则 */
  .sub-nav {
    display:none;
    position: absolute;
  }
  
  .has-sub-nav:hover .sub-nav {
    display: block;
    transition: 0.3s; /* 修正单位错误 */
    position: absolute;
    margin: 0;
    width:100%;
    padding-top: 0;
    padding-left:0;
    left: 100%; /* 让子菜单在父项右侧展开 */
    top: 0;
  }
}

3. 可选：合并冗余CSS规则 #

.no-sub-nav和.has-sub-nav的样式存在大量重复，可合并为通用规则减少冗余：

/* 通用菜单项样式 */
.nav-menu li a,
.nav-menu li a:focus {
  display: flex;
  align-items: center;
  color: rgba(26,26,26,1.00);
  padding: 10px 18px;
  transition: 0.3s;
  font-size: 15px;
  border-radius: 50px;
  background: #f2f3f5;
  height: 56px;
  width: 100%;
  overflow: hidden;
  border: 4px #1a1a1a solid;
}

.nav-menu li a span,
.nav-menu li a:focus span {
  padding: 0 5px 0 5px;
  color: #1a1a1a;
}

/* 单独处理差异项 */
.no-sub-nav {
  margin-bottom: 8px;
}

.has-sub-nav li {
  padding-bottom:8px;
}

完成以上修改后，悬停前两个菜单项时将不会触发第三个菜单项的子菜单展开，导航交互恢复正常。

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