html - 将css中的活动状态添加到导航栏

Question

http://jsfiddle.net/DaJWC/ 我不知道如何使其中一个链接反向，使其一开始是蓝色的。另外，我将如何在您正在查看的当前页面下创建一条线。

ul#list-nav {
  list-style: none;
  margin-left: 45px;
  padding: 0;
  width: 525px;
}
ul#list-nav li {
  display: inline
}
ul#list-nav li a {
  text-decoration: none;
  text-transform: capitalize;
  padding: 5px 0;
  width: 100px;
  background: ;
  color: #333;
  float: left;
  text-align: center;
}
ul#list-nav li a:hover {
  background: ;
  color: #09F
}

<ul id="list-nav">
  <li><a href="index.html" class="active">Home</a>
  </li>
  <li><a href="#" class="border_left">About Us</a>
  </li>
  <li><a href="#" class="border_left">Portfolio</a>
  </li>
  <li><a href="#" class="border_left">Get a Quote</a>
  </li>
  <li><a href="#" class="border_left">Contact</a>
  </li>

</ul>

Answer 1

您需要从设置颜色的位置删除“:hover”。我会创建一个新的选择器，例如： ul#list-nav li a {...} 然后您可以为非悬停和悬停选择颜色。看看这个。