二级菜单（.dropdown-menu）默认不透明是bootstrap设计使然，因其自带白色背景和边框，不继承父级透明设置；需用组合选择器+!important覆盖background-color、border、box-shadow及文字颜色，并在滚动和移动端等各状态中统一处理。
二级菜单（.dropdown-menu）为什么默认不透明？
Bootstrap 的 .dropdown-menu 在 v4/v5 中默认带 background-color: #fff 和 border，它和 .navbar 是独立 DOM 节点，不会继承父级的透明背景。哪怕你把 .navbar 设成 rgba(255,255,255,0) 或 transparent，下拉菜单依然白底黑字——这不是 bug，是设计使然。
-
.dropdown-menu的样式由 Bootstrap 自带 CSS 控制，权重高，直接写background-color: transparent很可能被覆盖 - 移动端展开时若没显式设背景，会透出页面内容，造成“错觉”：以为导航栏整体透明了，其实是下拉菜单漏了底
- 深色主题下，
.dropdown-menu默认仍为白色，需手动适配文字对比度
怎么安全覆盖 .dropdown-menu 背景透明度？
别只改 background-color，要一并处理 border、box-shadow 和文字颜色。推荐用组合选择器精准定位，避免影响全局下拉菜单：
- 加
!important（调试期必须，否则 Bootstrap 的.dropdown-menu规则优先级更高） - 显式清除边框：
border: none !important; - 去掉阴影：
box-shadow: none !important; - 文字颜色必须重设，例如：
color: rgba(255,255,255,0.9) !important;（配合深色背景）或color: #333 !important;（浅色背景） - 如果要用半透明白底，写成：
background-color: rgba(255,255,255,0.95) !important;（别用0，否则 hover 效果难识别）
.navbar .dropdown-menu {
background-color: rgba(255, 255, 255, 0.95) !important;
border: none !important;
box-shadow: none !important;
}
.navbar .dropdown-menu .dropdown-item {
color: #333 !important;
}
.navbar .dropdown-menu .dropdown-item:hover {
background-color: rgba(0, 0, 0, 0.05) !important;
}
滚动时二级菜单背景要不要同步变色？
要，但不能靠 CSS 自动响应。因为 .dropdown-menu 展开后脱离文档流（position: absolute），其渲染不受 window.scrollY 直接影响。必须 JS 主动监听并同步 class：
- 给
.navbar添加.scrolled类后，用更具体的选择器联动：.navbar.scrolled .dropdown-menu - 不要只写
.scrolled .dropdown-menu，否则可能匹配到非导航栏内的下拉菜单（如表单里的） - 过渡动画只加在
background-color上，别加all，否则box-shadow或transform动画会卡顿 - 注意移动端点击展开瞬间的闪烁：建议在
show.bs.dropdown事件里再强制刷新一次 class
移动端折叠态下拉菜单背景变灰/发虚？
这是最常被忽略的一环：Bootstrap 5 在小屏幕下会自动移除 .navbar 的 bg-* 类，但 .navbar-collapse 容器本身没背景，而 .dropdown-menu 又默认白底——结果就是菜单浮在半空，底下页面内容透上来，看起来像“灰蒙蒙的毛玻璃”。
- 根本解法：给
.navbar-collapse显式加背景类，比如bg-body（v5.3+）或bg-white，而不是依赖.navbar继承 - 如果用了
backdrop-filter: blur(10px)，确认父容器没overflow: hidden，否则模糊效果被裁剪 - 检查
.dropdown-menu是否被包裹在.dropdown内部的div里——某些定制主题会多套一层，导致选择器失效 - IE11 不支持
backdrop-filter，且rgba()透明度在低版本中表现不稳定，降级方案只能用纯色 + 降低文字 opacity（不推荐）
.navbar、.navbar-collapse、.dropdown-menu、.dropdown-item——在各种状态（初始、滚动、展开、悬停、移动端）下背景行为一致。漏掉任意一个，都会在某个场景下突然“露底”。
