スタイルシートによるメニュー

HTMLでリストを作成(tableタグで作ってみる)

<table border="0" width=200>
  <tr>
    <td width="100%" bgcolor="#E6E6E6"><b>Menu</b></td>
  </tr>
  <tr>
    <td width="100%"><a href="../../java/index.html" class="menulink">Java Page</a></td>
  </tr>
  <tr>
    <td width="100%"><a href="../index.html" class="menulink">JavaScript Page</a></td>
  </tr>
  <tr>
    <td width="100%"><a href="../../tips/index.html" class="menulink">Tips Page</a></td>
  </tr>
  <tr>
    <td width="100%"><a href="../../links.html" class="menulink">Link Page</a></td>
  </tr>
</table>

a タグに対してスタイルを設定（hover を記述）

.menulink {
  display: block;
  width: 200px;
  text-align: left;
  text-decoration: none;
  font-family:arial;
  font-size:12px;
  color: #000000;
  border: solid 1px #FFFFFF;
}
 
.menulink:hover {
  border: solid 1px #8C5CBD;
  background-color:#F0E1FF;
}

結果