js实现一级菜单右侧推出二级菜单

好的，这是一个比较常见的网站导航菜单效果。我们可以使用 HTML、CSS 和 JavaScript 来实现它。

首先，我们需要先创建一个 HTML 结构，包括一级菜单和对应的二级菜单。例如：

<nav>
  <ul class="menu">
    <li><a href="#">一级菜单1</a>
      <ul class="submenu">
        <li><a href="#">二级菜单1</a></li>
        <li><a href="#">二级菜单2</a></li>
        <li><a href="#">二级菜单3</a></li>
      </ul>
    </li>
    <li><a href="#">一级菜单2</a>
      <ul class="submenu">
        <li><a href="#">二级菜单1</a></li>
        <li><a href="#">二级菜单2</a></li>
      </ul>
    </li>
    <li><a href="#">一级菜单3</a>
      <ul class="submenu">
        <li><a href="#">二级菜单1</a></li>
        <li><a href="#">二级菜单2</a></li>
        <li><a href="#">二级菜单3</a></li>
        <li><a href="#">二级菜单4</a></li>
      </ul>
    </li>
  </ul>
</nav>

然后，我们可以使用 CSS 样式来控制一级菜单和二级菜单的显示和隐藏状态。例如：

/* 隐藏二级菜单 */
.submenu {
  display: none;
}

/* 鼠标悬停一级菜单时显示对应的二级菜单 */
.menu > li:hover > .submenu {
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
}

最后，我们可以使用 JavaScript 来添加一些交互效果，例如当用户点击一级菜单时，显示对应的二级菜单。例如：

// 获取所有的一级菜单
const menuItems = document.querySelectorAll('.menu > li');

// 遍历一级菜单，为每个菜单添加点击事件
menuItems.forEach(item => {
  // 获取当前菜单下的二级菜单
  const submenu = item.querySelector('.submenu');
  
  // 添加点击事件
  item.addEventListener('click', () => {
    // 显示或隐藏二级菜单
    submenu.classList.toggle('active');
  });
});

这样，当用户点击一级菜单时，就可以显示或隐藏对应的二级菜单了。完整的代码可以参考下面的示例：

<style>
  /* 隐藏二级菜单 */
  .submenu {
    display: none;
  }

  /* 鼠标悬停一级菜单时显示对应的二级菜单 */
  .menu > li:hover > .submenu {
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
  }

  /* 显示二级菜单 */
  .submenu.active {
    display: block;
  }
</style>

<nav>
  <ul class="menu">
    <li><a href="#">一级菜单1</a>
      <ul class="submenu">
        <li><a href="#">二级菜单1</a></li>
        <li><a href="#">二级菜单2</a></li>
        <li><a href="#">二级菜单3</a></li>
      </ul>
    </li>
    <li><a href="#">一级菜单2</a>
      <ul class="submenu">
        <li><a href="#">二级菜单1</a></li>
        <li><a href="#">二级菜单2</a></li>
      </ul>
    </li>
    <li><a href="#">一级菜单3</a>
      <ul class="submenu">
        <li><a href="#">二级菜单1</a></li>
        <li><a href="#">二级菜单2</a></li>
        <li><a href="#">二级菜单3</a></li>
        <li><a href="#">二级菜单4</a></li>
      </ul>
    </li>
  </ul>
</nav>

<script>
  // 获取所有的一级菜单
  const menuItems = document.querySelectorAll('.menu > li');

  // 遍历一级菜单，为每个菜单添加点击事件
  menuItems.forEach(item => {
    // 获取当前菜单下的二级菜单
    const submenu = item.querySelector('.submenu');

    // 添加点击事件
    item.addEventListener('click', () => {
      // 显示或隐藏二级菜单
      submenu.classList.toggle('active');
    });
  });
</script>