Bootstrap导航子菜单悬停显示实现及CSS选择器工作原理解释咨询

核心原理 #

该效果通过后代选择器和:hover伪类组合实现：当父元素被悬停时，选中其后代的子菜单元素，将display属性从隐藏状态改为显示状态，即可实现纯CSS交互，无需JS参与。选择器的层级需要和实际DOM结构的层级严格对应，才能正确匹配到目标元素。

你遇到的问题原因 #

1. 属性值错误：你使用的display: hidden是无效写法，CSS中display属性没有hidden有效值，隐藏元素需要用display: none，浏览器无法识别错误的属性值，是规则不生效的首要原因。
2. 选择器匹配错误：.submenu子菜单的直接父元素是带有dropdown-submenu类的li标签，不是上层的.nav-item，因此你之前针对.nav-item写的悬停规则无法触发子菜单显示。
3. HTML结构冗余：你在<li class="dropdown-submenu">后多写了一个多余的<li>开启标签，会导致DOM层级错乱，需要先删除该冗余标签，将「My New Drop Down」对应的a标签和子菜单都放在dropdown-submenu类的li内部。

修改后的完整CSS代码 #

你可以直接替换原有style标签内的内容：

<style>
@media all and (min-width: 1200px) {
  .nav-link {
    font-size: 25px;
  }
  /* 修复一级菜单隐藏的属性值错误 */
  .navbar .nav-item .dropdown-menu {
    display: none;
    font-size: 20px;
  }
  .navbar .nav-item:hover .dropdown-menu {
    display: block;
    background: rgba(66, 66, 66, 0.4);
  }
  .dropdown-menu>li:hover {
    background-color: black;
  }
  .dropdown-menu .dropdown-item:hover {
    background-color: black;
  }
  /* 给子菜单父元素加相对定位，作为子菜单绝对定位的参照 */
  .dropdown-menu .dropdown-submenu {
    position: relative;
  }
  /* 修复二级子菜单隐藏的属性值错误 */
  .navbar .nav-item .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
  }
  /* 新增父元素悬停时显示子菜单的规则 */
  .navbar .dropdown-menu .dropdown-submenu:hover .submenu {
    display: block;
  }
}
</style>

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