使用j s完成顶部菜单

好的，下面是使用 JavaScript 实现顶部菜单的基本步骤：

1. 创建 HTML 结构。可以先创建一个固定的顶部导航栏，并在其中创建菜单列表项。

<nav class="topnav">
  <a href="#">菜单项1</a>
  <a href="#">菜单项2</a>
  <a href="#">菜单项3</a>
  <a href="#">菜单项4</a>
</nav>

2. 使用 CSS 样式为顶部导航栏添加样式。

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

3. 使用 JavaScript 为菜单项添加事件。当菜单项被点击时，可以添加或移除 active 类，以及显示或隐藏菜单的子菜单。

var topnav = document.querySelector(".topnav");
var links = topnav.querySelectorAll("a");

for (var i = 0; i < links.length; i++) {
  links[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

4. 最后，使用 CSS 样式为菜单项的子菜单添加样式，使其以列表的形式显示。

.topnav .submenu {
  display: none;
  position: absolute;
  z-index: 1;
}

.topnav .active .submenu {
  display: block;
}

通过以上步骤，您可以完成一个简单的顶部菜单。当然，您可以根据自己的需求，进一步修改样式和添加功能。