css nav制作

CSS 导航栏制作方法

水平导航栏
使用 display: inline-block 或 flex 布局实现水平排列。设置 list-style: none 移除列表默认样式，通过 padding 和 margin 调整间距。

.nav {
  background-color: #333;
  overflow: hidden;
}
.nav li {
  float: left;
}
.nav a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.nav a:hover {
  background-color: #ddd;
  color: black;
}

垂直导航栏
通过 display: block 让列表项垂直堆叠，固定宽度并添加背景色增强视觉效果。

.nav {
  width: 200px;
  background-color: #f1f1f1;
}
.nav a {
  display: block;
  color: black;
  padding: 12px;
  text-decoration: none;
}
.nav a:hover {
  background-color: #555;
  color: white;
}

响应式导航栏
使用媒体查询适配移动端，通常结合 flex 或 grid 布局。在小屏幕下隐藏菜单项，通过按钮切换显示。

@media screen and (max-width: 600px) {
  .nav li {display: none;}
  .nav .icon {
    display: block;
    float: right;
  }
}
.nav.responsive li {
  float: none;
  display: block;
  text-align: left;
}

下拉菜单导航
通过 position: absolute 隐藏下拉内容，悬停时显示。确保父元素设置 position: relative 以定位子菜单。

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

固定顶部/底部导航
使用 position: fixed 固定导航栏位置，配合 z-index 避免内容覆盖。

.nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

关键提示

• 使用 flex 或 grid 布局简化对齐和间距控制。
• 添加 transition 属性实现悬停动画效果。
• 通过 :active 和 :focus 状态提升可访问性。