html导航栏下拉菜单js

下面是一个简单的HTML导航栏下拉菜单的Javascript代码：

// 获取所有的带子菜单的菜单项
var dropdowns = document.getElementsByClassName("dropdown");

// 遍历所有菜单项
for (var i = 0; i < dropdowns.length; i++) {
  // 当鼠标移动到菜单项上方时触发
  dropdowns[i].addEventListener("mouseover", function() {
    // 显示子菜单
    this.getElementsByClassName("dropdown-content")[0].classList.add("show");
  });

  // 当鼠标移开菜单项时触发
  dropdowns[i].addEventListener("mouseout", function() {
    // 隐藏子菜单
    this.getElementsByClassName("dropdown-content")[0].classList.remove("show");
  });
}

在此代码中，我们首先获取所有带子菜单的菜单项，然后使用`addEventListener`方法为每个菜单项添加`mouseover`和`mouseout`事件监听器。当鼠标移动到菜单项上方时，我们使用`classList.add()`方法为子菜单添加`show`类，从而使其显示出来；当鼠标移开菜单项时，我们使用`classList.remove()`方法将`show`类移除，从而使子菜单隐藏起来。需要注意的是，我们使用`getElementsByClassName()`方法获取菜单项和子菜单元素，因此需要在HTML中为它们添加相应的类名（例如`class="dropdown"`和`class="dropdown-content"`）。