当前位置：首页 > CSS

css制作下拉菜单

2026-02-26 21:01:58CSS

使用纯CSS制作下拉菜单

通过CSS的:hover伪类和display属性可以实现简单的下拉菜单效果。核心思路是利用嵌套的HTML结构和CSS控制二级菜单的显示与隐藏。

HTML结构示例：

<ul class="dropdown">
  <li>主菜单1
    <ul>
      <li>子菜单1</li>
      <li>子菜单2</li>
    </ul>
  </li>
  <li>主菜单2
    <ul>
      <li>子菜单1</li>
    </ul>
  </li>
</ul>

CSS样式示例：

css制作下拉菜单

.dropdown {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dropdown > li {
  display: inline-block;
  position: relative;
  padding: 10px 20px;
  background: #f0f0f0;
}
.dropdown li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 160px;
  padding: 0;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.dropdown li:hover > ul {
  display: block;
}

添加过渡动画效果

为下拉菜单添加平滑的显示动画可以提升用户体验，通过CSS的transition和opacity属性实现渐显效果。

改进后的CSS：

css制作下拉菜单

.dropdown li ul {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.dropdown li:hover > ul {
  opacity: 1;
  visibility: visible;
}

响应式下拉菜单

针对移动设备，可以通过媒体查询将下拉菜单改为全宽度显示。

响应式CSS：

@media (max-width: 768px) {
  .dropdown > li {
    display: block;
  }
  .dropdown li ul {
    position: static;
    width: 100%;
  }
}

使用CSS变量统一风格

通过CSS变量可以方便地统一修改下拉菜单的颜色和尺寸。

:root {
  --menu-bg: #f8f9fa;
  --menu-hover: #e9ecef;
  --menu-text: #212529;
  --menu-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
.dropdown > li {
  background: var(--menu-bg);
  color: var(--menu-text);
}
.dropdown li ul {
  background: var(--menu-bg);
  box-shadow: var(--menu-shadow);
}
.dropdown > li:hover {
  background: var(--menu-hover);
}