直接设 .dropdown-menu { background-color: transparent } 无效，因为 Bootstrap 4/5 中该元素自带 background-color: #fff 和 border，且作为独立 DOM 节点不继承父级透明设置；必须用组合选择器（如 .navbar .dropdown-menu）配合 !important 显式覆盖 background-color（推荐 rgba()）、border、box-shadow 及文字颜色，并单独处理移动端展开态与滚动同步变色。
为什么直接设 .dropdown-menu { background-color: transparent } 没用
因为 .dropdown-menu 在 bootstrap 4/5 中自带 background-color: #fff 和 border，它和 .navbar 是独立 dom 节点，不继承父级透明设置。哪怕你把导航栏设成 rgba(255,255,255,0)，下拉菜单依然白底黑字——这不是 bug，是设计使然。浏览器开发者工具里能看到你的 transparent 声明被划掉，真正生效的是 bootstrap 自带的高权重规则。
必须同时覆盖 background、border、box-shadow 和文字颜色
只改 background-color 会留下白边、阴影和模糊文字。安全写法要用组合选择器 + !important 精准控制：
-
.navbar .dropdown-menu：确保只影响导航栏内的下拉菜单，不波及其他组件（如表单里的dropdown） - 显式清除所有干扰项：
background-color: rgba(255, 255, 255, 0.95) !important（别用transparent，它无法参与过渡动画）; border: none !important; box-shadow: none !important; - 文字颜色不能靠继承：加
.dropdown-menu .dropdown-item { color: #333 !important; }，深色主题下换成#fff - 悬停背景也要重写：
.dropdown-item:hover { background-color: rgba(0, 0, 0, 0.05) !important; }
移动端展开时背景发虚或透出页面内容
Bootstrap 5 在小屏下会移除 .navbar 的 bg-* 类，但 .navbar-collapse 容器本身没背景，而 .dropdown-menu 又默认白底——结果就是菜单浮在半空，底下页面内容透上来，看起来像“灰蒙蒙的毛玻璃”。这最容易被忽略。
- 必须单独给移动端展开态的菜单加背景：
.navbar-collapse.show .dropdown-menu或.navbar-toggler[aria-expanded="true"] + .navbar-collapse .dropdown-menu - 不要依赖
bg-transparent类——它只设background-color: transparent，压不住.dropdown-menu自带的#fff - 如果用了 backdrop-filter 毛玻璃效果，记得加
-webkit-backdrop-filter兼容 iOS Safari
滚动时下拉菜单背景要不要同步变色
要，但 CSS 无法自动响应。因为 .dropdown-menu 是 position: absolute，脱离文档流，不受 window.scrollY 直接影响。必须 JS 主动监听并同步 class：
- 监听
scroll事件时用requestAnimationFrame节流，避免卡顿 - 切换类名要精准：
.navbar.scrolled .dropdown-menu，而不是.scrolled .dropdown-menu（后者可能匹配到非导航栏内的下拉菜单） - 过渡动画只加在
background-color上，起始值必须是rgba()（比如rgba(255,255,255,0.1)），不能用transparent，否则 transition 失效 - 在
show.bs.dropdown事件里再强制刷新一次 class，解决移动端点击瞬间的闪烁
