HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单

当使用HTML、CSS和JavaScript通过嵌套ul和li来实现简单的二级菜单时，可以按照以下步骤进行操作：

1. 创建HTML结构：首先，在HTML文件中创建一个ul元素，作为一级菜单的容器。在该ul元素中，创建多个li元素，每个li元素代表一个一级菜单项。对于每个一级菜单项，可以在其下方创建一个嵌套的ul元素，作为二级菜单的容器。在二级菜单的ul元素中，创建多个li元素，每个li元素代表一个二级菜单项。

示例1：

<ul>
  <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>

1. 添加CSS样式：使用CSS来设置菜单的样式，包括菜单项的外观、显示和隐藏二级菜单等。可以使用选择器来选择一级菜单和二级菜单，并设置相应的样式属性。

示例2：

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  position: relative;
  padding: 10px;
  background-color: #f2f2f2;
  cursor: pointer;
}

li:hover {
  background-color: #ccc;
}

ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f2f2f2;
}

li:hover > ul {
  display: block;
}

ul ul li {
  display: block;
}

1. 添加JavaScript交互：使用JavaScript来实现菜单的交互效果，例如鼠标悬停时显示二级菜单。可以使用事件监听器来监听鼠标事件，并在事件发生时执行相应的操作。

示例3：

var menuItems = document.querySelectorAll('li');

menuItems.forEach(function(item) {
  item.addEventListener('mouseover', function() {
    var subMenu = this.querySelector('ul');
    if (subMenu) {
      subMenu.style.display = 'block';
    }
  });

  item.addEventListener('mouseout', function() {
    var subMenu = this.querySelector('ul');
    if (subMenu) {
      subMenu.style.display = 'none';
    }
  });
});

通过按照以上步骤进行操作，就可以实现一个简单的二级菜单。在示例1中，创建了一个包含一级菜单和二级菜单的HTML结构。示例2中的CSS样式设置了菜单的外观和交互效果。示例3中的JavaScript代码实现了鼠标悬停时显示二级菜单的功能。根据实际需求，可以进一步扩展和定制菜单的样式和交互效果。