Bootstrap导航栏下拉菜单始终展开，如何设置为悬停时显示？

嘿，我来帮你搞定这个Bootstrap导航栏下拉菜单的问题！你说的下拉菜单始终展开，大概率是自定义样式或者默认行为被意外覆盖了，咱们通过补充调整CSS就能实现默认隐藏、鼠标悬停才显示的效果，具体操作如下：

核心CSS修改方案 #

你只需要在现有的CSS代码基础上，添加针对下拉菜单的控制样式即可，完整的整合代码如下：

.navbar > .navbar-brand { 
    color: black; 
} 
.navbar-default .navbar-nav>li>a { 
    color: black; 
} 
.navbar-default .navbar-nav>li>a:active, 
.navbar-default .navbar-nav>li>a:focus { 
    background-color: black; 
    color: white; 
} 
.navbar-default ul li a:hover { 
    color: #000; 
} 

/* 新增下拉菜单专属样式 */
/* 1. 默认强制隐藏下拉菜单 */
.navbar-default .navbar-nav .dropdown-menu {
    display: none;
}

/* 2. 鼠标悬停在父菜单项时，展开下拉菜单 */
.navbar-default .navbar-nav > li.dropdown:hover .dropdown-menu {
    display: block;
}

/* 3. 修复点击父菜单项后，下拉菜单残留展开的问题 */
.navbar-default .navbar-nav > li.dropdown.open .dropdown-menu {
    display: none;
}
.navbar-default .navbar-nav > li.dropdown:hover.open .dropdown-menu {
    display: block;
}

额外适配建议（移动端） #

如果你的网站需要适配移动端，建议在小屏幕设备上保留Bootstrap默认的点击触发下拉行为（毕竟移动端没有鼠标悬停），可以添加媒体查询来实现：

/* 屏幕宽度小于768px时，恢复点击触发下拉的默认行为 */
@media (max-width: 767px) {
    .navbar-default .navbar-nav > li.dropdown:hover .dropdown-menu {
        display: none;
    }
    .navbar-default .navbar-nav > li.dropdown.open .dropdown-menu {
        display: block;
    }
}

版本兼容说明 #

如果你的项目用的是Bootstrap 4或5，类名会略有变化（比如把li.dropdown换成nav-item.dropdown），但核心逻辑完全一致，只需要对应修改选择器即可。

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