css二级菜单制作

使用HTML和CSS创建二级菜单

HTML结构部分，使用嵌套的无序列表（<ul>和<li>）构建菜单层级：

<nav class="menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul class="submenu">
        <li><a href="#">产品A</a></li>
        <li><a href="#">产品B</a></li>
      </ul>
    </li>
    <li><a href="#">服务</a></li>
  </ul>
</nav>

基础CSS样式设置

设置主菜单和子菜单的基本样式，包括清除默认列表样式和定位方式：

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  background: #333;
}

.menu li {
  position: relative;
}

.menu a {
  display: block;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}

子菜单隐藏与显示控制

通过CSS的display和hover状态实现二级菜单的交互效果：

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #444;
  min-width: 200px;
}

.menu li:hover > .submenu {
  display: block;
}

添加过渡动画效果

使用CSS过渡属性让菜单显示更平滑：

.submenu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.menu li:hover > .submenu {
  opacity: 1;
  visibility: visible;
}

响应式设计调整

针对移动设备添加媒体查询，调整菜单显示方式：

@media (max-width: 768px) {
  .menu ul {
    flex-direction: column;
  }

  .submenu {
    position: static;
  }
}

添加视觉反馈效果

增强用户交互体验的悬停效果：

.menu a:hover {
  background: #555;
}

.submenu a:hover {
  background: #666;
}