纯CSS响应式下拉菜单和气泡框的关键在于定位逻辑闭环：父容器必须设position: relative，伪元素必须写content: ""，z-index需合理设置；三角箭头靠单边有色border实现，移动端需用checkbox模拟点击，响应式应切换交互而非仅缩放。
纯CSS做响应式下拉菜单和气泡框，关键不在“炫技”，而在定位逻辑是否闭环——position: relative 漏写、z-index 层级错乱、伪元素:before/:after 缺content，三者任一出问题，效果就直接消失。
下拉菜单必须用 position: relative + absolute 配合 :hover
很多人直接给子菜单加 position: absolute，但忘了父容器没设 position: relative，结果子菜单按 body 定位，飘到页面任意角落。这不是 bug，是 CSS 定位规则本身决定的。
- 父级
<li class="dropdown">必须有position: relative，否则top: 100%会相对于最近的定位祖先（可能是）计算 - 子菜单
.dropdown-menu设position: absolute; top: 100%; left: 0;，才能紧贴父项下方对齐 - 移动端不支持
:hover，所以纯 CSS 下拉在触屏设备上默认失效；如需点击展开，得靠input[type="checkbox"] + label模拟或改用 JS - 如果用
display: none/block切换显隐，注意它会触发重排（reflow），动画要用opacity+visibility配合transition才顺滑
气泡框的三角箭头本质是单边有色 border
气泡的“箭头”不是图片，也不是 SVG，而是利用 CSS 边框的斜角渲染特性：四个方向的 border 宽度一致时，交汇处自然形成等腰直角三角形。只要把其中三边设为 transparent，留一边有色，就得到指向特定方向的箭头。
-
.bubble:before必须有content: ""，否则伪元素不渲染，箭头根本不会出现 - 指向右侧的箭头：用
left: 100%; top: 50%; transform: translateY(-50%)定位，并设border-left-color: #fff，其余三边transparent - 箭头大小由
border-width控制，但不能只调这个值——若父容器 padding 不足，箭头会被裁掉；建议统一用em或rem单位保持缩放一致性 - 多个气泡叠加时，
z-index得比周边内容高，但别盲目设成 9999；通常z-index: 10足够，再配合父容器position: relative就能隔离层级
响应式切换要避开 display 的断点陷阱
媒体查询里直接写 @media (max-width: 768px) { .dropdown-menu { display: block; } } 是危险操作——它会强制显示所有下拉项，破坏交互逻辑。响应式不是“让东西变小”，而是“换一套交互方式”。
立即学习“前端免费学习笔记（深入）”；
- 小屏下应隐藏主菜单，用汉堡图标 +
input[type="checkbox"]控制展开，避免依赖:hover - 不要在媒体查询里改
position: absolute为static，这会导致布局塌陷；正确做法是保留定位，但通过transform: translateY()或max-height+overflow控制收放 - 气泡框在小屏上容易超出视口，建议加
@media (max-width: 480px)规则：缩小font-size、减小padding、把箭头位置从left: 20px改为right: 10px避免被截
最常被忽略的一点：所有用到 position: absolute 的元素，其定位参考系必须明确。没有 position: relative 的父容器，top/left 就是空中楼阁；而伪元素没写 content，等于宣告自己不存在——这两处错误，调试时几乎无法通过 DevTools 直观发现，只能靠经验逐行核对。
