css二级菜单 css二级菜单的隐藏与显示

CSS二级菜单的实现

在网页设计中，菜单是一个非常重要的元素，它可以帮助用户快速导航到网站的各个部分，二级菜单是一种常见的菜单形式，它可以为用户提供更深层次的导航选项，在本文中，我们将介绍如何使用CSS来实现二级菜单。

我们需要创建一个HTML结构来表示我们的菜单，这个结构通常包括一个包含所有菜单项的父元素，以及每个菜单项的子元素。

<ul class="menu">
  <li>Menu Item 1
    <ul class="submenu">
      <li>Submenu Item 1</li>
      <li>Submenu Item 2</li>
    </ul>
  </li>
  <li>Menu Item 2</li>
  <li>Menu Item 3</li>
</ul>

在这个例子中，"menu"类的元素是主菜单，"submenu"类的元素是二级菜单，每个二级菜单都嵌套在一个主菜单项中。

接下来，我们可以使用CSS来样式化我们的菜单，我们需要隐藏所有的二级菜单，然后当用户将鼠标悬停在主菜单项上时，显示相应的二级菜单，这可以通过添加以下CSS代码来实现：

.submenu {
  display: none;
}
.menu li:hover .submenu {
  display: block;
}

在这个例子中，"display: none"将二级菜单隐藏，"display: block"将在鼠标悬停时显示二级菜单。

这个简单的实现有一个问题，那就是当用户将鼠标从主菜单项移动到二级菜单项时，二级菜单会立即消失，这是因为CSS的":hover"伪类只会在鼠标悬停时应用样式，为了解决这个问题，我们可以使用JavaScript来改变二级菜单的显示和隐藏行为。

我们需要为每个二级菜单添加一个"mouseenter"事件监听器，当用户将鼠标移动到二级菜单上时，显示二级菜单，我们需要为每个二级菜单添加一个"mouseleave"事件监听器，当用户将鼠标移出二级菜单时，隐藏二级菜单，这可以通过添加以下JavaScript代码来实现：

var submenus = document.querySelectorAll('.submenu');
for (var i = 0; i < submenus.length; i++) {
  submenus[i].addEventListener('mouseenter', function() {
    this.style.display = 'block';
  });
  submenus[i].addEventListener('mouseleave', function() {
    this.style.display = 'none';
  });
}

在这个例子中，我们首先使用"querySelectorAll"函数获取所有的二级菜单，我们遍历这些二级菜单，为每个二级菜单添加"mouseenter"和"mouseleave"事件监听器，当用户将鼠标移动到二级菜单上时，我们显示二级菜单；当用户将鼠标移出二级菜单时，我们隐藏二级菜单。