html - css のアクティブ状態をナビゲーション バーに追加する

Question

http://jsfiddle.net/DaJWC/ リンクの 1 つを逆にして最初から青色にする方法がわかりません。また、現在表示しているページの下に線を引くにはどうすればよいでしょうか。

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 {...} のような新しいセレクターを作成すると、非ホバーとホバーの色を選択できます。これを見てください。