css二级菜单制作

2026-01-08 17:25:23CSS

使用纯CSS实现二级菜单

通过嵌套HTML结构和CSS选择器实现二级菜单的显示与隐藏效果。以下是一个基础实现方案：

HTML结构：

<ul class="menu">
  <li>
    <a href="#">主菜单1</a>
    <ul class="submenu">
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">主菜单2</a>
    <ul class="submenu">
      <li><a href="#">子菜单3</a></li>
      <li><a href="#">子菜单4</a></li>
    </ul>
  </li>
</ul>

CSS样式：

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

.menu li {
  position: relative;
  padding: 10px 20px;
}

.menu a {
  color: white;
  text-decoration: none;
}

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

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

添加过渡动画效果

为二级菜单添加平滑的显示动画：

.submenu {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  transform: translateY(-10px);
}

.menu li:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

响应式设计处理

针对移动设备调整二级菜单的显示方式：

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

  .submenu {
    position: static;
    transform: none;
  }
}

使用CSS变量维护主题色

通过CSS变量统一管理菜单颜色：

:root {
  --menu-bg: #333;
  --menu-text: #fff;
  --submenu-bg: #444;
}

.menu {
  background: var(--menu-bg);
}

.menu a {
  color: var(--menu-text);
}

.submenu {
  background: var(--submenu-bg);
}

添加箭头指示器

为主菜单项添加下拉箭头提示：

.menu > li > a::after {
  content: "▼";
  font-size: 0.6em;
  margin-left: 5px;
  display: inline-block;
  transition: transform 0.3s;
}

.menu > li:hover > a::after {
  transform: rotate(180deg);
}

css二级菜单制作