纯CSS实现二级导航菜单需满足三条件：HTML中子ul必须为li的直接子元素、li设position:relative、用:hover>ul精准触发；移动端须弃用:hover，改用JS或checkbox模拟点击展开。

纯 CSS 实现二级导航菜单的关键在于结构语义正确、选择器精准、伪类触发时机合理——只要

嵌套层级清晰，:hover 作用域不越界，就能避免 JS 介入也能稳定展开子菜单。

HTML 结构必须用嵌套

而非

二级菜单不是“在链接旁加个

”就能生效的。浏览器对 :hover 的冒泡和作用范围有严格限制：只有后代元素在父级 hover 区域内才可被触发显示。若用

平级放置，li:hover .submenu 根本选不到。

• ✅ 正确结构：每个顶级
• 内部直接包裹子
  ，形成 DOM 层级嵌套
• ❌ 错误写法：
• 服务
...
（脱离父
• ，hover 失效）
• ⚠️ 注意：子
  必须是
• 的**直接子元素**，不能隔一层 或

  :hover 显示子菜单时，display 和 visibility 的取舍

  用 display: none 隐藏子菜单最常见，但会导致布局重排（reflow），悬停瞬间有“跳动”；而 visibility: hidden 保留占位，视觉更稳，但需配合 opacity 和 pointer-events 才能真正禁用交互。

  • ✅ 推荐组合：visibility: hidden; opacity: 0; pointer-events: none; + transition: opacity .2s ease;
  • ❌ 单用 display: none：子菜单出现时宽度/高度从 0 计算，可能造成文字折行或图标错位
  • ⚠️ 注意：若子菜单含表单控件（如搜索框），pointer-events: none 会禁用所有点击/聚焦，此时应改用 opacity + transform: scaleY(0) 控制显隐

  响应式断点中，@media 下拉菜单需重置 hover 行为

  小屏下通常切换为“点击展开”，但很多开发者只加了 @media (max-width: 768px) 的样式，却忘了关闭桌面端的 :hover 触发逻辑——结果是手指轻点一级菜单时，子菜单闪一下又收起，体验极差。

  

  Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

  实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

  下载

  • ✅ 正确做法：在移动断点内，给 li 加 position: relative，子
    默认 display: none，再用 JavaScript 切换 show 类控制显隐
  • ❌ 仅靠 CSS 媒体查询隐藏子菜单：未解决触摸设备无 hover 状态的问题，悬停残留逻辑仍会干扰点击
  • ⚠️ 注意：iOS Safari 对 :hover 支持不稳定，首次点击会触发一次 hover，第二次才真正点击，建议小屏一律弃用 :hover 控制二级菜单

  真正难的不是写出能展开的二级菜单，而是让它的 DOM 结构经得起屏幕阅读器读取、SEO 抓取、移动端点击、键盘 Tab 导航 —— 每一层

  是否有明确的 role="menu" 和 aria-haspopup，往往比动画效果更重要。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！