响应式多级菜单通过 html 嵌套列表构建层级结构，css使用 max-height 和 transition 实现子菜单平滑展开与收起，javaScript 为。dropdown-toggle 元素添加点击 事件 以切换。active 类控制显示状态，结合媒体查询在移动端将主菜单设为垂直 排列 并增加缩进与背景色区分层级，同时通过 伪元素 添加上下箭头提示展开状态，提升可访问性，确保在不同设备上均具备良好用户体验。
在现代 网页设计 中，响应式多级菜单是提升用户体验的重要组件。尤其是在移动端屏幕空间有限的情况下，通过折叠与展开结合媒体查询的方式，可以让导航结构清晰又节省空间。
基本 HTML 结构
一个清晰的 HTML 结构是实现多级菜单的基础。使用无序列表（ul）嵌套来表示层级关系，便于样式控制和交互处理。
<nav class="menu"> <ul> <li><a href="#"> 首页 </a></li> <li> <a href="#" class="dropdown-toggle"> 产品 </a> <ul class="submenu"> <li><a href="#"> 手机 </a></li> <li> <a href="#" class="dropdown-toggle"> 配件 </a> <ul class="submenu"> <li><a href="#">耳机 </a></li> <li><a href="#"> 充电器</a></li> </ul> </li> </ul> </li> <li><a href="#"> 关于我们 </a></li> </ul> </nav>CSS 基础样式与折叠逻辑
默认隐藏子菜单，通过 CSS 类控制显示状态。利用 max-height 和 overflow: hidden 实现平滑过渡效果。
.menu ul {list-style: none; padding: 0; margin: 0;} <p>.menu > ul {display: flex; }</p><p>.menu a {display: block; padding: 12px 16px; text-decoration: none; color: #333;}</p><p>.submenu {max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;}</p><p>.submenu.active {max-height: 300px; /<em> 足够容纳子项的高度 </em>/}</p>注意：使用 max-height 而非 display: none/block，是为了支持动画过渡。
立即学习 “ 前端免费学习笔记（深入）”；
javascript控制展开 / 收起
为带 .dropdown-toggle 的链接添加 点击事件，切换对应 submenu 的 active 类。
document.querySelectorAll('.dropdown-toggle').forEach(toggle => { toggle.addEventListener('click', function(e) {e.preventDefault(); const submenu = this.nextElementSibling; if (submenu && submenu.classlist.contains('submenu')) {submenu.classList.toggle('active'); } }); });这段脚本阻止默认跳转行为，并切换子菜单的可见状态。
结合媒体查询适配移动端
@media (max-width: 768px) {.menu > ul { flex-direction: column;} <p>.menu a {border-bottom: 1px solid #eee;}</p><p>.submenu {background-color: #f9f9f9; margin-left: 16px;} }</p>当屏幕小于 768px 时，主菜单变为纵向 排列，子菜单有缩进和背景色区分层级。这种结构在手机上更易操作。
增强可访问性与用户体验
加入视觉提示，比如三角图标表示可展开，提升用户认知。
.dropdown-toggle::after {content: " ▼"; font-size: 0.7em; vertical-align: middle;} <p>.dropdown-toggle.collapse::after {content: " ▲";}</p>
this.classList.toggle('collapse');基本上就这些。通过结构化 HTML、灵活的 CSS 过渡、轻量 JS 控制以及精准的媒体查询，就能构建出既美观又实用的响应式多级菜单。关键是保持层级清晰，交互直观，适配不同设备自然流畅。
