javascript点击下拉菜单出现子菜单

在JavaScript中，创建下拉菜单并使其显示子菜单通常涉及到HTML结构、CSS样式以及一些交互性的脚本。这里是一个简单的示例：

首先，创建HTML结构：

<div class="dropdown">
  <button class="dropbtn">选择选项</button>
  <div class="dropdown-content">
    <a href="#">子菜单项1</a>
    <a href="#">子菜单项2</a>
    <!-- 添加更多子菜单项 -->
  </div>
</div>

然后，用CSS设置基本样式：

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
}

.dropbtn:hover .dropdown-content {
  display: block;
}

接下来，在JavaScript中添加交互逻辑：

document.querySelector('.dropbtn').addEventListener('click', function() {
  this.classList.toggle('active');
});

在这个例子中，当用户点击"选择选项"按钮时，`dropbtn`的`active`类会被添加或移除，这会改变`.dropdown-content`的`display`属性，使得子菜单在鼠标悬停时显示。