使用JavaScript和CSS创建二级菜单

在JavaScript和CSS中创建二级菜单通常涉及到HTML结构的搭建、CSS样式的设计以及JavaScript事件处理。下面是一个简单的示例：

首先，设置HTML结构，包括主菜单项和它们的子菜单项：

<nav>
  <ul class="main-menu">
    <li><a href="#">一级菜单1</a>
      <ul class="sub-menu">
        <li><a href="#">二级菜单1.1</a></li>
        <li><a href="#">二级菜单1.2</a></li>
      </ul>
    </li>
    <!-- 添加其他一级菜单 -->
  </ul>
</nav>

然后，用CSS设置基础样式，例如颜色、布局等：

.main-menu {
  list-style-type: none;
  padding: 0;
}

.main-menu li {
  display: inline-block;
}

.sub-menu {
  display: none; /* 初始隐藏 */
  position: absolute; /* 子菜单位置相对于父级 */
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.sub-menu li {
  padding: 12px 16px;
  cursor: pointer;
}

最后，在JavaScript中添加事件监听器来控制子菜单的显示与隐藏：

// 获取菜单元素
const menuItems = document.querySelectorAll('.main-menu > li');

menuItems.forEach(item => {
  // 点击一级菜单时显示对应的子菜单
  item.addEventListener('click', function() {
    this.querySelector('.sub-menu').classList.toggle('show');
  });
});

// 初始化隐藏所有子菜单
document.querySelectorAll('.sub-menu').forEach(subMenu => {
  subMenu.classList.add('hide'); // 添加额外的隐藏类名，比如 'hide'
});

当用户点击一级菜单时，相应的子菜单会通过`.toggle()`方法切换显示或隐藏。注意这只是一个基本示例，实际项目中可能需要考虑更多的细节，如鼠标悬停效果、响应式设计等。