菜单制作 css

基础菜单结构设计

使用HTML构建菜单骨架，通常采用无序列表<ul>嵌套<li>实现层级结构。示例代码：

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

清除默认样式

重置列表和链接的默认样式，为后续自定义设计做准备：

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu a {
  text-decoration: none;
  color: inherit;
}

水平导航菜单

通过Flexbox或Inline-Block实现横向排列：

/* Flexbox方案 */
.menu ul {
  display: flex;
  gap: 20px; /* 项间距 */
}
/* 或Inline-Block方案 */
.menu li {
  display: inline-block;
  margin-right: 20px;
}

悬停与交互效果

添加悬停高亮、过渡动画等增强用户体验：

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

下拉子菜单实现

通过绝对定位和隐藏/显示控制实现二级菜单：

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

响应式适配

使用媒体查询实现移动端折叠菜单：

@media (max-width: 768px) {
  .menu ul {
    flex-direction: column;
  }
  .menu .submenu {
    position: static;
    box-shadow: none;
  }
}

视觉增强技巧

• 活动状态标识：通过.active类标记当前页面

  .menu .active a {
  font-weight: bold;
  border-bottom: 2px solid #3498db;
  }

• 图标集成：使用伪元素添加FontAwesome等图标

  .menu li::after {
  content: "→";
  margin-left: 5px;
  }