css二级菜单制作

基础HTML结构

使用嵌套的<ul>和<li>标签构建菜单层级。主菜单项包含子菜单列表：

<ul class="main-menu">
  <li>首页</li>
  <li>
    产品
    <ul class="sub-menu">
      <li>产品A</li>
      <li>产品B</li>
    </ul>
  </li>
  <li>关于我们</li>
</ul>

CSS核心样式

通过定位和显示属性控制二级菜单的显隐：

.main-menu {
  list-style: none;
  padding: 0;
  position: relative; /* 为子菜单定位提供基准 */
}
.sub-menu {
  display: none; /* 默认隐藏 */
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 120px;
  background: #333;
}
.main-menu li {
  display: inline-block;
  padding: 10px;
  position: relative; /* 触发悬停时保持层级 */
}
.main-menu li:hover .sub-menu {
  display: block; /* 悬停时显示 */
}

悬停交互优化

添加过渡效果和视觉反馈：

.sub-menu {
  opacity: 0;
  transition: opacity 0.3s;
}
.main-menu li:hover .sub-menu {
  opacity: 1;
}
.main-menu li {
  transition: background 0.2s;
}
.main-menu li:hover {
  background: #555;
}

响应式适配

针对移动设备调整布局：

@media (max-width: 768px) {
  .main-menu li {
    display: block;
  }
  .sub-menu {
    left: 0;
    top: 100%;
  }
}

无障碍支持

通过ARIA属性增强可访问性：

<li aria-haspopup="true" aria-expanded="false">
  产品
  <ul role="menu" aria-hidden="true">
    <li role="menuitem">产品A</li>
  </ul>
</li>

通过JavaScript动态更新aria-expanded和aria-hidden状态。