js中的二级菜单怎么制作？

首先：

在 HTML 文件中，需要创建一个菜单容器元素，在该元素下创建一级菜单项元素，每个一级菜单项元素下面再添加二级菜单项元素。

在 CSS 文件中，通过给菜单项元素设置合适的样式来美化菜单的外观。

在 JavaScript 文件中，则需要实现菜单的交互效果，包括鼠标悬停/离开时的效果等

写好html
 

<ul id="menu">
  <li><a href="#">菜单1</a>
    <ul>
      <li><a href="#">菜单1-1</a></li>
      <li><a href="#">菜单1-2</a></li>
      <li><a href="#">菜单1-3</a></li>
    </ul>
  </li>
  <li><a href="#">菜单2</a>
    <ul>
      <li><a href="#">菜单2-1</a></li>
      <li><a href="#">菜单2-2</a></li>
    </ul>
  </li>
  <li><a href="#">菜单3</a></li>
</ul>

在该结构中，ul 元素的 id 属性被设置为 menu，该元素下是一些 li 元素，每个 li 元素又包含一个 a 元素和一个子菜单 ul 元素。其中，一级菜单项的 a 元素是可点击的超链接，而二级菜单项的 a 元素则只起到了文本展示的作用

加上css

#menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
 
#menu > li {
  display: inline-block;
  margin-right: 10px;
  position: relative;
}
 
#menu > li > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
}
 
#menu > li:hover > ul {
  display: block;
}
 
#menu > li > ul > li {
  display: block;
  white-space: nowrap;
}
 
#menu > li > ul > li > a {
  display: block;
  padding: 5px;
  background-color: #eee;
  color: #333;
  text-decoration: none;
}
 
#menu > li > ul > li > a:hover {
  background-color: #ccc;
}

加上js

 let menu = document.getElementById('menu');
 
menu.addEventListener('mouseover', function (e) {
  if (e.target.nodeName === 'LI') {
    var ul = e.target.querySelector('ul');
    if (ul) {
      ul.style.display = 'block';
    }
  }
});
 
menu.addEventListener('mouseout', function (e) {
  if (e.target.nodeName === 'LI') {
    let ul = e.target.querySelector('ul');
    if (ul) {
      ul.style.display = 'none';
    }
  }
});

其中：使用 document.getElementById('menu') 获取到菜单容器元素 ul

使用 menu.addEventListener('mouseover', ...) 给菜单容器添加鼠标悬停事件监听。

在事件处理函数中，首先需要判断当前鼠标滑过的元素是否是 li 元素，如果是，则找到该元素下的 ul 子元素并将其显示出来即可 你学会了吗？