HTML如何制作多级菜单？嵌套下拉列表怎么实现？

嗯……在 2 02 2 年，我真的很努力地创建那个多层菜单。
从一开始，我就面对着电脑，搞乱了 HTML 结构。
看看这个：
<导航类='主导航'> 首页 产品 <!-
二级菜单 --> 产品A 产品C <!-
第三级菜单 --> 副产品 C1 </导航>
我当时就迷惑了，这个巢穴……简直就是一个迷宫。
CSS部分就更烦人了，设置位置、显示、隐藏，要花很多时间。
请参阅：
CSS /原创风格/ .main-nav ul { 列表样式：无； 保证金：0； 填充：0； }
.main-nav > ul { 显示：柔性； /一级菜单横向排列/ 背景颜色：3 3 3 ； }
.main-nav 李 { 位置：相对； /提供子菜单位置的上下文/ }
.main-nav a { 显示：块； 内边距：1 0 像素 1 5 像素； 颜色 白色； 文本装饰：无； }
/隐藏子菜单/ .main-nav ul ul { 显示：无； 位置：绝对； 背景颜色：4 4 4 ； 最小宽度：1 6 0px； z 索引：1 000； / 确保菜单位于顶部/ }
/ 二级菜单位置（垂直向下展开）/ .main-nav > ul > li > ul { 顶部：1 00%； 左：0； }
/ 三级菜单位置（水平向右展开）/ .main-nav ul ul ul { 顶部：0； 左：1 00%； }
/鼠标悬停时显示子菜单/ .main-nav li:hover > ul { 显示：块； }
当时我尝试了很多方法，但都没有效果。
后来我意识到可能是z-index错误，或者定位参考错误。
我花了整个下午才把事情搞定。
JavaScript部分主要是ARIA属性和键盘这是关于导航的。
请参阅：
JavaScript document.querySelectorAll('.main-nav li').forEach(item => { const link = item.querySelector('a'); const 子菜单 = item.querySelector('ul'); 如果（子菜单）{ link.setAttribute('aria-haspopup', 'true'); link.setAttribute('aria-expanded', 'false'); // 点击切换子菜单 link.addEventListener('点击', (e) => { e.preventDefault(); const isExpanded = link.getAttribute('aria-expanded') === 'true'; link.setAttribute('aria-expanded', !isExpanded); submenu.style.display = 展开？ '无' : '阻止'; }); } });
当我调试的时候，真的很困惑。
也许我太极端了，你为什么认为这种事情这么复杂？但事实证明，移动端优化部分比较麻烦。
在较小的屏幕上，这应该转换为通过单击触发的“汉堡包”菜单。
当时我真想找个地缝钻进去。
请参阅：
JavaScript // 简单的汉堡切换 document.querySelector('.hamburger').addEventListener('click', () => { const menu = document.querySelector('.main-nav'); menu.style.display = menu.style.display === '块'？ '无' : '阻止'; });
反正做完这些，2 02 2 年项目的多级菜单就解决了。
不过现在想想，或许还有优化的空间。
例如，添加过渡动画或其他内容可以改善用户体验。
不过当时时间紧迫，也就罢了。

怎样在一个HTML中嵌入另一个HTML页面

这就是坑。
不要使用 iframe 进行跨域嵌入。
请不要这样做。

html标签的嵌套规则介绍