导航栏制作

1. 水平导航栏（Flexbox）

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #333;
  padding: 10px 20px;
}
.navbar ul {
  display: flex;
  list-style: none;
}
.navbar a {
  color: white;
  padding: 10px 20px;
  text-decoration: none;
}
.navbar a:hover {
  background: #555;
}

2. 下拉菜单

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

3. 移动端汉堡菜单

使用媒体查询，在小屏幕上显示汉堡图标，点击展开菜单。

相关文章：个人主页实战 | 登录表单