jQuery下拉菜单与Bootstrap 4兼容问题：子菜单无法展开

嘿，这个问题我之前帮朋友排查过，其实就是Bootstrap的默认样式和你自定义的子菜单逻辑“打架”了！

冲突原因 #

• Bootstrap自带了一套完整的下拉菜单样式体系，其中针对子菜单（比如.dropdown-menu类）默认设置了display: none来隐藏，而且它的选择器权重大概率比你自己写的子菜单hover触发样式更高。当你引入Bootstrap的CSS后，它的样式会直接覆盖你原本用来让子菜单hover展开的自定义规则，导致鼠标悬停时子菜单还是被死死隐藏着，没法正常显示。
• 另外，Bootstrap的下拉菜单默认是点击触发（依赖它的JS组件），而你的子菜单是hover触发，这种交互逻辑的差异也可能间接干扰子菜单的状态切换，让hover效果失效。

解决方法 #

这里给你几个实用的方案，按需选择就行：

1. 提升自定义样式的优先级 #

给你的整个菜单容器加一个专属的类名（比如<nav class="custom-main-menu">），然后用更具体的选择器来写子菜单的hover样式，比如：

.custom-main-menu ul li:hover > ul {
  display: block;
  /* 其他你需要的子菜单样式 */
}

这种写法会让你的选择器权重超过Bootstrap的通用下拉菜单样式，从而覆盖掉它的默认隐藏规则。尽量别用!important，除非实在没办法——它会让后续的样式调试变得很麻烦。

2. 改用Bootstrap原生下拉菜单组件 #

如果不想自己维护子菜单的样式逻辑，直接用Bootstrap自带的下拉菜单组件就好，既省心又不会冲突。把你的菜单结构改成符合Bootstrap规范的写法：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
    根菜单
  </a>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">子菜单选项1</a>
    <a class="dropdown-item" href="#">子菜单选项2</a>
  </div>
</li>

如果需要hover触发而不是点击，再加几行自定义CSS就行：

.dropdown:hover .dropdown-menu {
  display: block;
}

3. 手动覆盖Bootstrap的冲突样式 #

找到Bootstrap中影响你子菜单的具体规则，比如它默认给.dropdown-menu设置了display: none，你可以针对自己的子菜单类（比如你用的.submenu）写一段样式，并且把这段CSS放在Bootstrap CSS引入的后面：

/* 先默认隐藏子菜单 */
.submenu {
  display: none;
}
/* hover时显示 */
ul li:hover .submenu {
  display: block;
}

因为CSS遵循“后面的样式覆盖前面的”规则，这样你的自定义样式就能生效了。

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