css 制作菜单

水平菜单制作

使用 display: inline-block 或 flexbox 布局创建水平菜单。设置 list-style: none 移除默认列表样式，通过 padding 和 margin 调整间距。

<ul class="horizontal-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
</ul>

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

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

.horizontal-menu li a:hover {
  background-color: #111;
}

垂直菜单制作

通过 display: block 实现垂直堆叠效果。设置固定宽度和边框增强视觉层次。

<ul class="vertical-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
</ul>

.vertical-menu {
  width: 200px;
  list-style: none;
  padding: 0;
}

.vertical-menu li a {
  display: block;
  padding: 12px;
  text-decoration: none;
  color: black;
  border-bottom: 1px solid #ddd;
}

.vertical-menu li a:hover {
  background-color: #f1f1f1;
}

下拉菜单实现

结合 :hover 伪类和绝对定位实现下拉效果。父级菜单项需设置 position: relative。

<ul class="dropdown-menu">
  <li><a href="#">主菜单</a>
    <ul class="dropdown-content">
      <li><a href="#">子项1</a></li>
      <li><a href="#">子项2</a></li>
    </ul>
  </li>
</ul>

.dropdown-menu {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}

.dropdown-menu:hover .dropdown-content {
  display: block;
}

响应式菜单设计

使用媒体查询和汉堡图标实现移动端适配。通过 JavaScript 切换类名控制菜单显示/隐藏。

<button class="menu-toggle">☰</button>
<ul class="responsive-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
</ul>

.menu-toggle {
  display: none;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  .responsive-menu {
    display: none;
  }
  .responsive-menu.active {
    display: block;
  }
}

动画效果增强

通过 CSS 过渡属性添加平滑的悬停效果。使用 transform 实现缩放或位移动画。

.menu-item {
  transition: all 0.3s ease;
}

.menu-item:hover {
  transform: scale(1.05);
  background-color: #4CAF50;
}