应改 .navbar-collapse.show，因其是 collapse 模式下真正撑开菜单并承载背景色的容器；.dropdown-menu 仅用于 dropdown 模式，与响应式导航无关。
该改 .navbar-collapse.show 还是 .dropdown-menu？
取决于你用的是 collapse 模式还是 dropdown 模式。Bootstrap 5 默认推荐 collapse 模式（data-bs-toggle="collapse"），此时折叠后的内容直接渲染在 .navbar-collapse 内部，真正撑开菜单区域的是 .navbar-collapse.show ——它才是背景色生效的容器。.dropdown-menu 只在显式使用 data-bs-toggle="dropdown" 时才生成，和标准响应式导航无关。
.navbar-collapse.show 背景不生效的常见原因
不是 CSS 写错了，而是结构或层叠没对上：
-
.navbar-collapse默认overflow: hidden，如果内部.navbar-nav高度超出，背景会被裁掉——加overflow: visible试试 - 没确认 DOM 中是否真有
show类：点击汉堡图标后，用 DevTools 检查.navbar-collapse是否被 JS 动态加上了show - 自定义 CSS 文件加载顺序不对：必须在
bootstrap.min.css之后引入，否则样式被覆盖 - 用了
.navbar-light或.navbar-dark，但它们不设背景色，只调文字色——得单独给.navbar或.navbar-collapse.show加background-color
最简有效的写法
直接覆盖，不绕弯：
.navbar-collapse.show {
background-color: #2c3e50 !important;
overflow: visible;
}
加 !important 是因为 Bootstrap 5 的 .navbar-collapse 带内联 style 或高权重规则；overflow: visible 防止内容被截断。如果项目用 Sass，且版本 ≥5.3，也可改变量：$navbar-collapse-background: #2c3e50;，但需确认该变量已被引用。
别漏掉移动端下的文字可读性
背景一换，.nav-link 文字可能看不清：
- 默认
.navbar-light .nav-link是深色文字，配深背景就发灰——得同步改color - hover 状态也得手动设，比如
.navbar-collapse.show .nav-link:hover { color: #fff; } - 如果用了
.navbar-dark，它本身不提供背景，文字色靠--bs-navbar-color控制，建议统一用:root变量覆盖，而不是依赖 class 组合
折叠菜单的背景不是“画上去”的装饰，它是内容容器的实际渲染区域——改错选择器，等于在空气上刷漆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
