顶部导航下拉效果js—下拉菜单式导航：代码示例

温馨提示：这篇文章已超过230天没有更新，请注意相关的内容是否还可用！

顶部导航下拉效果是一种常见的网页导航设计，它可以在用户鼠标悬停或点击导航栏上的某个选项时，显示一个下拉菜单供用户选择。实现这种效果的常用方法是使用JavaScript来控制菜单的显示和隐藏。

我们需要为导航栏中的每个选项添加一个事件监听器，以便在用户鼠标悬停或点击时触发相应的操作。我们可以使用addEventListener方法来为每个选项添加鼠标悬停事件（mouseover）或点击事件（click）的监听器。

示例代码如下所示：


<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>
<div class="18d6-37f0-d4c8-22f3 dropdown">
  <button class="37f0-d4c8-22f3-d49b dropbtn">菜单1</button>
  <div class="d4c8-22f3-d49b-b95e dropdown-content">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
    <a href="#">选项3</a>
  </div>
</div>
<div class="22f3-d49b-b95e-fc3e dropdown">
  <button class="d49b-b95e-fc3e-5a8e dropbtn">菜单2</button>
  <div class="b95e-fc3e-5a8e-1a7a dropdown-content">
    <a href="#">选项4</a>
    <a href="#">选项5</a>
    <a href="#">选项6</a>
  </div>
</div>
</body>
</html>

在上面的示例代码中，我们使用了CSS来定义了下拉菜单的样式。通过设置`.dropdown-content`的`display`属性为`none`，我们将下拉菜单默认隐藏起来。然后，通过设置`.dropdown:hover .dropdown-content`的`display`属性为`block`，我们将下拉菜单在鼠标悬停时显示出来。

通过上述代码，当用户将鼠标悬停在菜单1或菜单2上时，对应的下拉菜单会显示出来供用户选择。这样，我们就实现了顶部导航下拉效果。