テンプレートと呼ぶほどじゃないですが、CSSで最初にやってみたくなるテクニックの一つである、javascriptを使わずにCSSのみでロールオーバーを実現する方法をサンプルを交えてご紹介です。

簡単に説明すると、CSSでa要素に背景を指定して、a:hoverにロールオーバー用の画像を指定して上げます。

a {
	background:url(hoge.gif) no-repeat;
}
a:hover {
	background:url(hoge_on.gif) no-repeat;
}

↑のように。

ただ、コレだけだとa要素はインライン要素なのでブロック要素に変えてあげなきゃいけません。
簡単に言うと、そのテキストのある部分にしか適用されないので、マウスカーソルを合わせたときテキスト部分しか反応されなかったり、背景画像が全部表示されなかったりするので、ちゃんと「っぽく」してあげます。

a {
	background:url(hoge.gif) no-repeat;
	display:block;
}

↑のように。

また、ブロック要素にすると横幅100%な感じになっちゃうので、widthで横幅を指定するのをお忘れなく。

a {
	background:url(hoge.gif) no-repeat;
	display:block;
	width:200px;
}

↑のように。

コレで必要最低限な部分はOKです。
後は、部分的に適用する為にidやclassなどをつけて行き、じゃんじゃん装飾していきます。

そーして出来上がったのが今回のサンプル。
http://css-happylife.com/template/01/

テンプレってカテゴリに入れてるんだから、お持ち帰り用もご用意しまひた。
http://css-happylife.com/template/01/01.zip


サンプルの簡易的な解説。

全部解説すると長くなりすぎてしまうので、適当に抜粋して書きます。

サンプルでは背景画像を一枚にして、通常時は画像を左上から指定した範囲まで読み込み、ロールオーバー時は逆に右上から。
コレにより画像が切り替わったように見せかけてます。
一枚にする理由は詳しく調べた事が無いのですが、どこかで聞いたのは、最初の読み込みの段階で読み込むので軽いとかだったような。
個人的には画像の枚数が減って楽なのと、
何となくカッコいい。←コレが一番大事。

メニューは、一般的にリストで作るのが文章構造的に正しいと言われておりますので、ソレに準じて今回のサンプルもリストである、ulで作成してます。
そのため、何の指定もしてあげないと「・」とかのリストマークが表示されてしまいます。
これだといけてないので、

li {
	list-style-type:none;
}
↑のように、リストマークを非表示にしてあげます。

続いて、リンクになっているテキストは通常アンダーラインが表示されてしまうので、今回はデザインの都合上削除。

a {
	text-decoration:none;
}

↑こんな感じで。

もう一つ続いて、メニューごとに区切りをつけ、分かりやすくする為に破線をつけてます。

li {
	border-bottom:1px dashed #CCC;
}

↑こんな感じで。

また、色んなブラウザがある以上色んなブラウザに対応させる為にやっている事として、サンプルのCSSを見てもらうと高さ指定(height)をしていない事に気付くと思います。

コレは文字サイズ変更に対応する為で、IEなどは絶対指定(px含む)で文字サイズ指定してしまえば対応出来ますが、ユーザービリティ的に好ましくないのと、Firefoxなどだと限りなく文字が大きく出来てしまうので、デザインが大幅に崩れないよう高さは固定してないです。

IEだと、文字サイズや文字量で何故か高さが自動で伸びてくれるという素敵なバグ(?)があるので、良いのですが、Firefoxなどじゃ伸びないってのもあります。

別の方法として、IE以外に、

li {
	height:auto;
	min-height:29px;
}

↑見たいな感じで指定する事で、padding-bottomで調整しなくてもいけたりします。
コレに関してはその内書くかも。

だいたいこんな感じです。
軽く書いてるつもりでも長くなってしまいますね...もっと簡潔に書けるようになりたいです。