怎么制作css菜单

创建水平CSS菜单

使用HTML的无序列表<ul>和CSS的display: inline-block或flexbox布局可以快速实现水平菜单。HTML结构需包含导航链接，CSS部分需清除列表默认样式并设置水平排列。

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

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

.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;
}

创建垂直CSS菜单

垂直菜单通过默认的块级元素特性实现，只需调整宽度和间距。HTML结构与水平菜单类似，CSS中取消flex布局即可自动垂直排列。

.vertical-menu {
  list-style-type: none;
  width: 200px;
  background-color: #f1f1f1;
}

.vertical-menu li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

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

添加下拉子菜单

通过CSS的:hover伪类和绝对定位实现下拉效果。需在HTML中嵌套新的<ul>作为子菜单，父级菜单项需设置position: relative。

<li class="dropdown">
  <a href="#">产品</a>
  <ul class="dropdown-content">
    <li><a href="#">产品A</a></li>
    <li><a href="#">产品B</a></li>
  </ul>
</li>

.dropdown {
  position: relative;
}

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

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

响应式菜单设计

使用媒体查询和JavaScript实现移动端适配。通过max-width媒体查询切换菜单样式，或添加汉堡菜单图标触发显示隐藏。

@media screen and (max-width: 600px) {
  .horizontal-menu {
    flex-direction: column;
  }
}

document.querySelector('.menu-icon').addEventListener('click', function() {
  document.querySelector('.menu').classList.toggle('show');
});

菜单动画效果

通过CSS过渡属性增强交互体验。transition属性可平滑改变颜色、背景或尺寸，transform能实现缩放或位移效果。

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

.menu-item:hover {
  transform: scale(1.05);
}