怎样用CSS实现自适应屏幕宽度的多级响应式下拉菜单？-css教程-PHP中文网

纯CSS自适应多级下拉菜单的关键是依据交互能力而非屏幕宽度：用@media (hover: hover) and (pointer: fine)启用:hover显隐，@media (hover: none), (pointer: coarse)禁用:hover改用:focus-within或JS控制；父级必须设position: relative，子菜单初始display: none，避免float导致z-index失效及空隙引发闪退。

怎样用css实现自适应屏幕宽度的多级响应式下拉菜单？

纯 CSS 实现自适应屏幕宽度的多级下拉菜单，关键不在写多少媒体查询，而在正确判断设备交互能力。用 @media (max-width: 768px) 切换菜单行为，大概率会让折叠屏横屏时失效、小屏笔记本失去 hover，最终在真实设备上“半瘫痪”。

用 `@media (hover: none)` 替代 `@media (max-width: ...)`

桌面端靠 :hover，移动端必须放弃它——但不能靠屏幕宽度来猜，得看浏览器是否支持 hover。

@media (hover: hover) and (pointer: fine) 下启用 .has-submenu:hover > .submenu 显隐逻辑
@media (hover: none), (pointer: coarse) 下彻底禁用所有 :hover 控制，只保留 :focus-within 和 JS 驱动的 [data-open="true"]
别写 @media (max-width: 767px) { .submenu { display: block; } }——这会让子菜单默认展开，失去控制权
Galaxy Z Fold 横屏宽度超 1000px 但不支持 hover；1366×768 的 Windows 笔记本却完全支持精细指针——尺寸不是决定因素

`position: relative` 缺失是二级菜单“消失”的头号原因

子菜单定位错乱、飘到左上角、鼠标一移就闪退，90% 是因为父级没设 position: relative 或隐藏方式错误。

每个带子菜单的
必须显式声明 position: relative，否则 .submenu 会相对于定位
.submenu 初始状态必须是 display: none，不能用 visibility: hidden 或 opacity: 0 ——前者让 hover 失效，后者仍占交互区域且无法触发 :hover
如果一级导航用了 float: left，z-index 会失效；换成 display: flex 并确保父容器有 position: relative
鼠标移入闪退？检查 .has-sub 和 .submenu 之间有没有像素级空隙——用 top: 100% 定位，别用 margin-top 或 top: auto

移动端点击展开后错位或瞬间关闭？别依赖 `:hover` 模拟

iOS Safari 和安卓 WebView 对 :hover 的模拟极不可靠：第一次点击可能被当 hover 触发，第二次才算 click，造成状态覆盖。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

彻底弃用 :hover 控制显隐，改用 JS 显式切换：el.classList.toggle("is-open") 或操作 dataset.open
子菜单定位别依赖 offsetTop——软键盘弹出、视口缩放都会破坏计算；改用 position: fixed + getBoundingClientRect() 动态算位置
展开前检查底部空间：window.innerHeight - rect.bottom 就向上展开（bottom: 100%），避免被裁剪
嵌套三级以上时，点开第三级常顺手关掉第二级——给子菜单的 click handler 加 event.stopPropagation()

`max-height` 过渡比 `height: 0 → auto` 更可控

height: 0 → auto 无法 transition，浏览器根本不知道 auto 是多少；直接切 display 又没法加动画。

统一用 max-height 过渡：.submenu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.2s;
展开时设为足够大的值，比如 max-height: 500px（要大于所有可能内容高度）
配合 opacity 或 visibility 做视觉增强，但不要单独靠它们控制显隐逻辑
如果菜单项文字过长导致换行错位，给 .submenu 加 white-space: nowrap 和 min-width: max-content