实现响应式导航菜单折叠需结合Flexbox、hover交互与媒体查询。1. 使用display: flex构建横向导航，flex-wrap允许换行，justify-content控制对齐；2. 通过max-height: 0与overflow: hidden隐藏子菜单，li:hover > ul触发展开并添加transition动画；3. 在@media (max-width: 768px)中设置flex-direction: column将菜单垂直堆叠，隐藏默认显示，利用.menu-toggle:hover + ul实现汉堡按钮hover展开；4. HTML结构包含.menu-toggle按钮与嵌套ul，大屏水平展示，小屏hover展开垂直菜单。该方案无需JavaScript，依赖CSS实现基础响应式折叠功能，适用于轻量项目。
实现响应式导航菜单折叠，关键是结合 Flexbox 布局、:hover 交互与 媒体查询（media query） 来控制显示状态。在小屏幕上将菜单折叠为可展开的下拉形式，大屏则水平展示，无需 JavaScript 也能完成基础功能。
1. 使用 Flex 布局构建基础导航结构
利用 Flex 让导航在桌面端自动伸缩对齐，结构清晰且易于控制。
- 给 ul 设置 display: flex，让菜单项横向排列
- 使用 flex-wrap: wrap 允许换行，适配窄屏
- 用 justify-content 控制定位，如 space-between 或 center
示例代码：
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: wrap;
}
nav ul li {
padding: 1rem;
}
nav ul li a {
text-decoration: none;
color: #333;
}
2. 添加 hover 触发折叠效果（移动端适用）
在移动端，可通过点击或悬停“菜单按钮”来显示隐藏的菜单项。由于移动端无 hover 持久状态，适合用于桌面端模拟下拉，或搭配伪类切换。
- 隐藏子菜单默认显示：max-height: 0 + overflow: hidden
- 通过父级 hover 触发展开：li:hover > ul
- 设置过渡动画更自然：transition: max-height .3s ease
例如，二级菜单 hover 展开：
nav ul ul {
max-height: 0;
overflow: hidden;
transition: max-height .3s ease;
}
nav ul li:hover > ul {
max-height: 200px;
}
3. 使用 Media Query 控制响应式断点
在屏幕变小时，将水平菜单转为垂直堆叠，并通过“汉堡按钮”触发显示。
- 设定断点，如 @media (max-width: 768px)
- 默认隐藏菜单项（除标题外）
- 利用伪元素或额外标签模拟“菜单按钮”，通过 hover 显示菜单
示例：仅在小屏显示汉堡按钮，hover 展开菜单
.menu-toggle {
display: none;
}
@media (max-width: 768px) {
.menu-toggle {
display: block;
background: #333;
color: white;
padding: 1rem;
text-align: center;
}
nav ul {
flex-direction: column;
max-height: 0;
overflow: hidden;
transition: max-height .4s ease;
}
nav .menu-toggle:hover + ul,
nav ul:hover {
max-height: 300px;
}
}
4. 完整结构建议
HTML 结构示例：
这样在大屏上菜单水平排列，小屏通过 hover “☰ Menu” 展开垂直菜单，实现无 JS 的响应式折叠。
基本上就这些——用 Flex 布局打底，media query 控断点，hover 模拟展开行为，简洁有效。虽然移动端 hover 不持久，但在桌面端体验良好，适合轻量项目。需要更强交互时再引入 JS。不复杂但容易忽略细节，比如过渡和溢出控制。
