小屏导航需用媒体查询隐藏次级菜单、添加汉堡按钮控制主菜单显隐、改hover为点击展开子菜单。核心是重构交互逻辑，同步调整样式与行为，确保可用性。
小屏下导航菜单折叠、次级菜单隐藏，核心是用媒体查询控制显示状态，并配合 JavaScript 或纯 CSS 实现点击展开。下面分三步讲清楚怎么做：
用媒体查询在小屏隐藏次级菜单
默认让次级菜单（如下拉子菜单）在桌面端可见，在小屏（比如宽度 ≤ 768px）时设为 display: none 或 visibility: hidden，同时确保父级菜单项保持可点击区域。
示例代码：
@media (max-width: 768px) {.nav-menu ul {
display: none;
}
.nav-menu li:hover ul,
.nav-menu li:focus-within ul {
display: none; /* 移除悬停/聚焦触发，避免小屏误触 */
}
}
添加汉堡按钮并控制主菜单折叠
小屏时隐藏原有导航栏，显示一个“☰”汉堡按钮；点击后切换主菜单的显示/隐藏状态。推荐用 checkbox hack 或 JS 控制，更稳妥用 JS。
立即学习“前端免费学习笔记（深入）”；
- HTML 中加一个 input[type="checkbox"] 和配套的 label（作为按钮），再把 .nav-menu 包进 nav 标签里
- CSS 中用 input:checked ~ .nav-menu 显示菜单（需注意 DOM 结构层级）
- 或直接用 JS 绑定 click 事件，给 .nav-menu 切换 class="active"，CSS 控制 .nav-menu.active { display: block; }
小屏下重新设计次级菜单交互方式
不能只靠 hover，得支持点击展开。常见做法是：
- 给带子菜单的 li 添加 position: relative，并在其内部加一个“+”或箭头按钮
- 用 JS 监听该按钮点击，给对应 ul 切换 show 类，CSS 设置 .show { display: block; }
- 也可用 details/summary 标签（语义化好、无需 JS），但兼容性要注意（IE 不支持）
关键点：小屏不是简单“隐藏”，而是重构交互逻辑——从悬停变为点击，从自动展开变为主动触发。样式和行为要同步调整，才能真正可用。
