实现一个具有二级菜单的导航栏

实现一个具有二级菜单的导航栏通常会在前端网页设计中使用，可以采用HTML、CSS和JavaScript（如jQuery或Vue.js等库）来构建。以下是一个基本步骤的概述：

1. **HTML结构**:
- 创建一个包含一级菜单的`<ul>`元素，每个一级菜单项都是一个`<li>`元素。
- 每个一级菜单项下，创建一个隐藏的`<ul>`作为二级菜单，通过添加`data-menu`属性标识。

<nav class="navbar">
  <ul class="nav-level-1">
    <li data-menu="menu1">
      <a href="#">一级菜单1</a>
      <ul class="nav-level-2" style="display:none;">
        <li><a href="#">二级菜单1-1</a></li>
        <!-- 添加更多二级菜单项 -->
      </ul>
    </li>
    <!-- 其他一级菜单项 -->
  </ul>
</nav>

2. **CSS样式**:
- 定义`.nav-level-1`和`.nav-level-2`的基本样式，包括位置、颜色、字体等。
- 使用`:hover`伪类来显示二级菜单，当鼠标悬停在一级菜单上时，二级菜单显示出来。

.nav-level-1 li:hover > .nav-level-2 {
  display: block;
}

3. **JavaScript/jQuery** (可选):
- 如果需要动态控制二级菜单的显示和隐藏，可以编写JavaScript或使用库如jQuery来监听点击事件。
- 当用户点击一级菜单时，检查`data-menu`属性，然后切换相应二级菜单的`display`状态。

$('.nav-level-1 li').click(function(e) {
  e.preventDefault();
  var submenu = $(this).find('.nav-level-2');
  if (submenu.is(':visible')) {
    submenu.slideUp();
  } else {
    $('.nav-level-2').slideUp();
    submenu.slideDown();
  }
});