如何在 HTML 静态页面中通过 css hover 触发二级菜单按钮显隐-html教程-PHP中文网

:hover在移动端失效是因触摸设备无持续悬停状态，ios/android仅短暂模拟后即失效；需用:focus-within替代，并确保html结构为文本子菜单，消除所有间隙、合理定位与事件控制。

如何在 html 静态页面中通过 css hover 触发二级菜单按钮显隐

纯 CSS 的 :hover 能触发二级菜单显隐，但只在桌面端可靠；移动端点击即跳转、无法保持展开——这不是你代码写错了，是浏览器行为本身决定的。

触摸设备没有持续 hover 状态。iOS 和安卓浏览器里，:hover 只在长按模拟悬停时短暂生效，松手立刻失效。用户点开一级菜单，手指一移，二级 ul 就消失，根本来不及选。

别指望 li:hover ul 在真机上“正常工作”——它在 Safari 移动版里可能只闪一下，Chrome Android 里甚至不触发
用 :focus-within 替代：一级菜单项必须是 <a></a>（天然可聚焦），二级 ul 嵌在它的父 li 内部
结构必须是：<li> <a>Products</a><ul><li><a>Laptops</a></li></ul> </li>，不能把 ul 放到 li 外面

鼠标从一级项移到二级菜单途中“断连”，导致 :hover 失效。这不是 CSS 写得不对，而是布局留了物理间隙。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

ul 必须设 position: absolute，父 li 设 position: relative，否则定位偏移或被裁剪
二级 ul 的 top 值要刚好接住一级项的底边，比如 top: 100% 或 top: 45px（取决于一级高度），不能靠 margin-top
检查是否有 border、padding 或父容器 overflow: hidden 把二级菜单截掉
所有间隙（哪怕 1px）都会触发 mouseout——用开发者工具检查元素之间是否真正“无缝衔接”

直接用 display: none / display: block 是最简方案，但极易出问题：切换硬、无过渡、且一旦父容器高度塌陷或 overflow 隐藏，子菜单就压根不出现。

初始状态用 visibility: hidden; opacity: 0; pointer-events: none;，hover 时改为 visibility: visible; opacity: 1; pointer-events: auto;
这样能加 transition: opacity .2s，视觉更稳，也避免 display 切换引发重排
千万别对二级 ul 单独设 display: none 后又用 li:hover ul { display: block }——如果父 li 高度为 0，它根本没 hover 区域
确保 ul ul（所有嵌套子菜单）默认隐藏：ul ul { visibility: hidden; opacity: 0; pointer-events: none; }