水平导航栏实例

创建具有深色背景色的基础水平导航栏，并在用户将鼠标移到链接上方时改变链接的背景色：

实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 当鼠标悬停时把链接颜色更改为 #111（黑色） */
li a:hover {
  background-color: #111;
}

• Home
• News
• Contact
• About

活动/当前导航链接

向当前链接添加 "active" 类，这样用户就知道他/她在哪个页面上：

实例

.active {
  background-color: #4CAF50;
}

• Home
• News
• Contact
• About