javascript 多级菜单-css多级菜单：代码示例

1、JavaScript多级菜单是一种常见的网页交互效果，它可以实现在一个菜单项上悬浮鼠标后展开多个子菜单项。通过JavaScript的事件监听和DOM操作，我们可以动态地改变菜单的显示状态。

下面是一个简单的示例代码，实现一个两级菜单：

HTML代码：

<ul id="menu">
  <li>菜单项1
    <ul>
      <li>子菜单项1</li>
      <li>子菜单项2</li>
      <li>子菜单项3</li>
    </ul>
  </li>
  <li>菜单项2
    <ul>
      <li>子菜单项4</li>
      <li>子菜单项5</li>
    </ul>
  </li>
  <li>菜单项3</li>
</ul>

CSS代码：

#menu ul {
  display: none;
}
#menu li:hover > ul {
  display: block;
}

JavaScript代码：

var menuItems = document.querySelectorAll('#menu li');
for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('mouseover', function() {
    this.querySelector('ul').style.display = 'block';
  });
  menuItems[i].addEventListener('mouseout', function() {
    this.querySelector('ul').style.display = 'none';
  });
}

在这个示例中，我们使用了HTML的无序列表（ul）来构建菜单结构。每个菜单项（li）下面可以包含一个子菜单（ul），子菜单的显示状态通过CSS的display属性控制。初始状态下，所有的子菜单都被设置为不显示（display: none）。

通过CSS的:hover伪类选择器，当鼠标悬浮在菜单项上时，子菜单的display属性被设置为显示（display: block）。

JavaScript部分的代码用于监听菜单项的鼠标事件。当鼠标悬浮在菜单项上时，通过querySelector方法找到对应的子菜单，然后将其display属性设置为显示。当鼠标移出菜单项时，将子菜单的display属性设置为不显示。

通过这样的方式，我们就可以实现一个简单的JavaScript多级菜单效果。