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 {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

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

垂直菜单制作

通过display: block实现垂直布局。使用width控制菜单宽度，border添加分隔线增强视觉效果。

<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;
  background-color: #f1f1f1;
  padding: 0;
}

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

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

下拉菜单实现

结合:hover伪类和绝对定位创建下拉效果。父菜单项设置position: relative，子菜单使用position: absolute定位。

<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;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}

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

响应式菜单设计

使用媒体查询实现移动端适配。默认隐藏菜单项，通过JavaScript或CSS复选框技术切换显示状态。

<nav class="responsive-menu">
  <input type="checkbox" id="menu-toggle">
  <label for="menu-toggle">☰ 菜单</label>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

.responsive-menu ul {
  display: none;
  list-style: none;
}

#menu-toggle:checked ~ ul {
  display: block;
}

@media (min-width: 768px) {
  .responsive-menu label {
    display: none;
  }
  .responsive-menu ul {
    display: flex;
  }
}

菜单动画效果

添加transition属性实现平滑悬停效果。使用transform创建缩放或位移动画，提升交互体验。

.animated-menu li a {
  transition: all 0.3s ease;
}

.animated-menu li a:hover {
  transform: scale(1.1);
  background-color: #4CAF50;
}