当前位置：首页 > CSS

css nav制作

2026-02-27 04:55:43CSS

水平导航栏制作

使用display: inline-block或flexbox实现水平导航。设置<ul>的list-style为none，移除默认列表样式。为<li>添加左右边距控制间距。

nav ul {
  list-style: none;
  display: flex;
  background-color: #333;
  padding: 0;
}

nav li {
  margin: 0 15px;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 14px 16px;
  display: block;
}

垂直导航栏制作

将flex-direction设为column创建垂直布局。调整宽度和背景色增强视觉效果。

nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 200px;
  background-color: #f1f1f1;
  padding: 0;
}

nav a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

悬停效果增强

添加:hover伪类实现交互反馈。使用transition平滑颜色变化效果。

nav a:hover {
  background-color: #555;
  color: white;
  transition: background-color 0.3s ease;
}

响应式导航设计

通过媒体查询切换布局方式。小屏幕时隐藏菜单，显示汉堡图标。

@media (max-width: 600px) {
  nav ul {
    display: none;
  }

  .mobile-menu {
    display: block;
  }
}

固定定位导航

使用position: fixed让导航栏始终可见。z-index确保导航在其他内容之上。

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

下拉菜单实现

通过绝对定位创建下拉效果。初始状态隐藏，悬停时显示。

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

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