HTML

<ul id="nav">
<li><a href="list1.html" class=""><b><b><b>非アクティブ</b></b></b></a></li>
<li><a href="list2.html" class=""><b><b><b>非アクティブ</b></b></b></a></li>
<li><a href="list3.html" class=""><b><b><b>非アクティブ</b></b></b></a></li>
<li><a href="list4.html" class=""><b><b><b>非アクティブ</b></b></b></a></li>
<li><a href="list5.html" class="current"><b><b><b>アクティブ</b></b></b></a></li>
<li><a href="list6.html" class=""><b><b><b>非アクティブ</b></b></b></a></li>
</ul>

CSS

*{ 
  zoom:1; /* haslayout 対策 */
}
#nav a {
  color: gray;
}
#nav a:link,a:visited {
  text-decoration: none;
}
#nav a:active,a:hover {
  text-decoration: underline;
}
#nav a.current:active,a.current:hover {
  color: white;
  text-decoration: underline;
}
#nav a b {
  font-weight: normal;
  cursor: pointer;
  position: relative; /* ボックス内を基準に相対位置で表示（内包するbにも継承） */
  display: block; /* インライン要素のb要素をブロック要素に（内包するbにも継承） */
}
#nav a b b b {
  padding: 1px 6px;
}
#nav li {
  list-style: none;
  width: 200px;
  font-size: 12px;
  margin: 3px 0;
  padding: 2px 0px 3px;
  border-width: 0px 0px 1px;
  border-color: grey;
  border-style: solid;
}
#nav .current {
  background: gray; /* 基調色 */
  border-color: gray; /* ボーダー両端の色（左右にはみ出す部分の色） */
  border-style:solid; /* ボーダー両端のスタイル */
  border-width: 0pt 1px; /* ボーダー両端の幅（左右にはみ出す大きさ） */
  margin:0pt 0pt 3px; /* リスト区切り線との間隔 */
  display: block; /* インライン要素のa要素をブロック要素に */
  color: white;
}
#nav .current b {
  top: -1px; /* 基準ボックスから上に1pxはみ出させる */
  border-color: gray; /* ボーダー上端の色（上にはみ出す部分の色） */
  border-style: solid; /* ボーダー上端のスタイル */
  border-width: 1px 0pt 0pt; /* ボーダー上端の幅（上にはみ出す大きさ） */
}
#nav .current b b {
  top: 2px; /* 基準ボックスから下に2pxはみ出させる（自身の1px分＋上記の1px分） */
  border-color: gray; /* ボーダー下端の色（下にはみ出す部分の色） */
  border-style: solid; /* ボーダー下端のスタイル */
  border-width: 0 0 1px; /* ボーダー下端の幅（下にはみ出す大きさ） */
}
#nav .current b b b {
  top: -1px; /* 内包する要素をボックスをずらしている分だけ補正をかける */
  border: 0; /* ボーダーを表示させない */
}

「Web標準で文書構造が！」とか「tableでレイアウトなんて！」とか言っている割には、divが大好きなんです。みんな。

でも、「B、気持ち悪い！」とか言われそう