css制作二级菜单

使用纯CSS制作二级菜单

通过CSS的:hover伪类和子选择器实现二级菜单的显示与隐藏。以下是一个典型的结构和样式示例：

HTML结构

<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;
}

.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;
    width: 100%;
  }
}

多级菜单实现

对于三级及以上菜单，只需嵌套更多UL元素并调整定位：

.submenu .submenu {
  left: 100%;
  top: 0;
}

视觉增强技巧

添加箭头指示符：

.menu li.has-submenu > a::after {
  content: "▼";
  margin-left: 5px;
  font-size: 0.8em;
}

边框和阴影效果：

.submenu {
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  border: 1px solid #555;
}