CSSでロールオーバーのメニューを作成するのが一般的になりましたね。
私も良く使います。
初めは全て別々の画像を切り出していましたが、
最近は1枚画像で表示位置を移動させてロールオーバー効果を出す方法がお気に入りです。
最近一番のお気に入り手法は、1枚画像でロールオーバーするだけでなく
動きまでつけられちゃうこの方法！
javascriptは使っていません。
マークアップはいたって簡単♪
<ｕｌ ｉｄ="ｂｕｔｔｏｎ">
<ｌｉ><ａ ｈｒｅｆ="http://style-free.biz/index.html">ｈｏｍｅ<／ａ><／ｌｉ>
<ｌｉ><ａ ｈｒｅｆ="http://style-free.biz/aboutme.html">ａｂｏｕｔｍｅ<／ａ><／ｌｉ>
<ｌｉ><ａ ｈｒｅｆ="http://style-free.biz/blog/">ｂｌｏｇ<／ａ><／ｌｉ>
<／ｕｌ>
使用した画像はなんとこれだけ！！
あとは、CSSコードはこんな感じ
ul#button {
position: absolute;
top: 0;
left: 100px;
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
font-size: 12px;
line-height: 1.6;
}
ul#button li{
float: left;
list-style: none;
margin: 0 0 0 5px;
padding: 0 0 0 10px;
background: url(bg.jpg) bottom left no-repeat;
}
ul#button li a{
display: block;
margin-top: -20px;/*上方向に20px下げる*/
padding: 25px 10px 15px 0;/*下げられた分の20pxと元からの5pxを足して上パディングへ25pxを指定*/
background: url(bg.jpg) bottom right no-repeat;
color: #fff;
font-weight:bold;
text-decoration: none;
}
ul#button li a:hover{
margin-top: 0;/*マウスオン時に下げられていた値を消す*/
color: #000099;
}
どんな風に表示されるか、こちらをご覧下さい！
http://style-free.biz/rollover.html