tailwind css 下拉菜单需用 group/group-hover + absolute 实现，父容器设 relative 且避免 overflow-hidden；须结合 focus-within 支持键盘导航，触发元素用 button，菜单项需可聚焦并有焦点样式；移动端用 peer-checked 模拟点击。
Tailwind CSS 本身不提供下拉菜单组件，但用 group + group-hover + absolute 就能实现轻量、可访问、无 JS 的纯 CSS 下拉菜单——前提是 HTML 结构合理、层级控制得当。
为什么直接用 hover 在子菜单上会失效？
常见错误是给下拉容器（如 ul）单独加 hover:opacity-100，结果鼠标一离开触发按钮，菜单立刻消失。这是因为悬停中断了“连续路径”，浏览器无法感知从按钮到菜单的过渡。
- 必须把触发元素和下拉容器包裹在同一个父级里，并用
group类标记 - 下拉容器需设为
absolute且初始opacity-0 invisible，再通过group-hover:opacity-100 group-hover:visible控制显隐 - 父容器要设
relative，否则absolute定位会脱离预期上下文
group-hover 配合 focus-within 才算真正可用
仅靠 hover 对键盘用户不友好，focus-within 能补全焦点链路。当用户 Tab 到触发按钮（button 或带 tabindex 的 div），再按方向键或回车展开菜单，需要菜单项可聚焦、有 focus 样式。
- 触发按钮必须是可聚焦元素（
button最稳妥，避免用div+onclick） - 下拉容器加
focus-within:opacity-100 focus-within:visible，与group-hover并列写 - 每个菜单项用
a或button，确保原生可聚焦；若用div，需加tabindex="0" - 记得加
outline-none并换用ring-2 ring-blue-500做焦点指示，否则移除默认 outline 后不可见
如何避免下拉菜单被父容器裁切或错位？
最常踩的坑是菜单被 overflow-hidden 的导航栏、卡片或 flex 容器截断，或者 absolute 定位偏移出屏幕。
- 检查所有祖先元素是否含
overflow-hidden或overflow-auto；如有，改用overflow-visible或提升菜单 DOM 层级（如挂到body） - 用
top-full+left-0替代手写top: 100%，更符合 Tailwind 的定位语义 - 若菜单过宽，加
min-w-max防止文字折行；用right-0实现右对齐下拉 - 移动端需额外处理：用
md:hidden md:block控制桌面端显示，配合peer-checked:xxx+checkbox模拟点击展开（因移动端 hover 不可靠）
真正的难点不在样式，而在让 hover、focus、键盘操作、移动端点击全部自然衔接。一个没处理好 z-index 的弹层可能被遮住，一个忘了 focus-within 的菜单会让屏幕阅读器用户卡住——这些细节比写几行 group-hover 更耗时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
