菜单制作 css

基础菜单结构

使用HTML的无序列表<ul>和列表项<li>构建菜单骨架，<a>标签包裹导航链接：

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

清除默认样式

重置列表的默认样式，移除项目符号和内外边距：

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

水平导航菜单

通过display: inline-block或flex布局实现水平排列：

.menu li {
  display: inline-block;
  margin-right: 15px;
}
/* 或使用flex布局 */
.menu {
  display: flex;
  gap: 20px;
}

悬停效果增强

为菜单项添加悬停动画和颜色变化：

.menu a {
  color: #333;
  text-decoration: none;
  padding: 8px 12px;
  transition: background-color 0.3s;
}
.menu a:hover {
  background-color: #f0f0f0;
  border-radius: 4px;
}

下拉菜单实现

通过绝对定位创建二级下拉菜单：

.menu li {
  position: relative;
}
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.menu li:hover .submenu {
  display: block;
}

响应式设计

使用媒体查询适配移动设备，转换为汉堡菜单：

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
    display: none;
  }
  .menu.active {
    display: flex;
  }
  /* 添加汉堡菜单按钮的样式 */
}

视觉增强技巧

添加分隔线和活动状态指示器：

.menu li:not(:last-child)::after {
  content: "|";
  margin-left: 15px;
  color: #ddd;
}
.menu a.active {
  border-bottom: 2px solid #3498db;
}

交互动画效果

使用CSS transform实现微交互：

.menu a {
  transform: translateY(0);
  transition: transform 0.2s;
}
.menu a:hover {
  transform: translateY(-2px);
}