h5中的两级导航菜单怎么写

H5中的二级导航菜单通常通过HTML结构配合CSS样式和JavaScript动态效果来实现。以下是基本步骤：

1. **HTML结构**：
- 使用`<nav>`标签创建导航栏。

   <nav id="navbar">
     <ul class="menu-level-1">
       <!-- 一级菜单项 -->
       <li><a href="#">一级菜单1</a></li>
       <li><a href="#">一级菜单2</a></li>
     </ul>
     <ul class="menu-level-2" style="display: none;"> <!-- 开始时隐藏二级菜单 -->
       <li>
         <a href="#">二级菜单1</a>
         <ul class="submenu"> <!-- 子级菜单 -->
           <li><a href="#">三级菜单1</a></li>
           <li><a href="#">三级菜单2</a></li>
         </ul>
       </li>
       <!-- 其他二级菜单项... -->
     </ul>
   </nav>

2. **CSS样式**：
- 配置基础样式，如字体、颜色等。
- 初始状态隐藏二级菜单：

   .menu-level-2 {
     display: none;
   }

3. **JavaScript (可选)**：
- 当点击一级菜单项时，显示对应的二级菜单：

   const menuItems = document.querySelectorAll('.menu-level-1 a');
   menuItems.forEach(item => {
     item.addEventListener('click', function(e) {
       e.preventDefault();
       this.nextElementSibling.classList.toggle('show'); // 显示或隐藏二级菜单
     });
   });

4. **伪CSS动画或过渡效果**：
可以使用CSS的`:hover`, `transition`或`animation`属性，给二级菜单添加悬停或点击时的平滑切换效果。