css二级菜单制作

使用纯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>

基础样式设置

主菜单使用Flex布局水平排列，子菜单默认隐藏：

.menu ul {
  display: flex;
  list-style: none;
  padding: 0;
}
.menu li {
  position: relative;
  margin-right: 20px;
}
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

悬停显示子菜单

通过:hover伪类触发二级菜单显示，添加过渡动画效果：

.menu li:hover .submenu {
  display: block;
  animation: fadeIn 0.3s;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

响应式处理

在小屏幕设备上改为垂直布局：

@media (max-width: 768px) {
  .menu ul { flex-direction: column; }
  .submenu {
    position: static;
    box-shadow: none;
  }
}

增强交互效果

添加箭头指示符和悬停高亮：

.menu li.has-submenu::after {
  content: "▼";
  font-size: 0.6em;
  margin-left: 5px;
}
.menu a:hover {
  color: #3498db;
  transition: color 0.2s;
}