通常ナビゲーションメニュー(横並びのメニュー)などはマウスをメニューの上に重ねると背景画像などが変わり選択していることが見た目でも分かりやすく作成してあります。マウスを重ねると背景画像が変わる表示の仕方をロールーバーと言いますが、その作成方法はjavascriptで作成した方法と、CSS(スタイルシート)のみで作成する方法があります。今回はよく使われるであろうと思うロールオーバー系の横並びメニューを3パターン紹介したいと思います。 CSS(スタイルシート)によるロールオーバー効果 下記のスタイルはテキスト文字+CSS(スタイルシート)で背景画像が変わるようにして有ります。 CSS(スタイルシート)で背景が変わるための背景画像は下記の図で説明してあるとおりセット画像にして用意しておきます。 ここで使用しているソース htmlソース <ul id="navi"> <li><a href="#"
![ロールオーバー系のCSS横並びメニュー](https://cdn-ak-scissors.b.st-hatena.com/image/square/6fe8c4bac329a607efc340c1387c8866ad667bec/height=288;version=1;width=512/http%3A%2F%2Fdetarame.moo.jp%2Fwp%2Fwp-content%2Fuploads%2F2011%2F03%2Fcssrollover.png)