(x)htmlにテキストを記入し、CSSでマウスオーバー時に背景画像を変更させる。

xhtmlソース
<div>
<ul>
<li>navi1</li>
<li>navi2</li>
<li>navi3</li>
<li>navi4</li>
<li>navi5</li>
</ul>
</div>

CSSソース
ul{
list-style:none;
margin:0;
padding:0;
}
li{
margin:0;
padding:0;
background:マウスオーバー時の表示設定;
}
a{
background:常時の表示設定;
display:block;
width:○○px;
}
a:hover{
background-image:none;
background-color:transparent;
}

ナビゲーションをリストで作成するポイント

• ulとliにmargin,paddingの設定をする（ブラウザによる解釈の違いを統一させるため）。
• aの「display:block」はかなり重要（インライン要素をブロック要素にすることで幅を決めることができる）。
• aのwidthの指定はIE対策。必要に応じてハックを利用する。

  参考：ブラウザによるwidthプロパティの解釈の違い

• マウスオーバー時の設定は「a:hover」に書き込むのではなく（単に透明にするだけ）、「li」に書き込む（もたつきのない動作を提供できる）。