css菜单制作小结

CSS 菜单制作方法

水平导航菜单
使用 display: inline-block 或 float 实现横向排列，配合 padding 和 background 增强视觉效果：

.nav-menu {
  background: #333;
}
.nav-menu li {
  display: inline-block;
  padding: 12px 20px;
}
.nav-menu a {
  color: white;
  text-decoration: none;
}

垂直下拉菜单
通过 :hover 触发子菜单显示，结合 position: absolute 定位：

.dropdown {
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
}
.dropdown:hover .dropdown-content {
  display: block;
}

响应式设计
使用媒体查询适配移动端，常配合汉堡图标（☰）切换菜单：

@media (max-width: 768px) {
  .nav-menu li {
    display: block;
  }
  .mobile-menu-btn {
    display: block;
  }
}

动画效果增强
通过 transition 或 transform 添加平滑过渡：

.menu-item {
  transition: background 0.3s ease;
}
.menu-item:hover {
  background: #555;
}

关键注意事项

• 确保菜单层级清晰，使用语义化标签如 <nav> 和 <ul>
• 高亮当前页面菜单项时可添加 .active 类
• 移动端优先时默认隐藏完整菜单，通过 JavaScript 控制显隐