CSSのみで画像のロールオーバー（その1）

• ホーム
• サービス
• リンク
• 会社概要
• お問い合わせ

XHTML

<ul id="globalNavi">
<li class="gnavi01"><a href="#header" title="ホーム">ホーム</a></li>
<li class="gnavi02"><a href="#header" title="サービス">サービス</a></li>
<li class="gnavi03"><a href="#header" title="リンク">リンク</a></li>
<li class="gnavi04"><a href="#header" title="会社概要">会社概要</a></li>
<li class="gnavi05"><a href="#header" title="お問い合わせ">お問い合わせ</a></li>
<!--/ #globalNavi--></ul>

CSS

ナビゲーション全体の幅を決めます。#globalNavi:afterで指定しているのはclearfixです。
margin-bottom: 20px;必要なければ消して下さい。

#globalNavi	{
	width: 550px;
	margin-bottom: 20px;
}
#globalNavi:after	{ height:0; visibility: hidden;	content: "."; display: block; clear: both; }

text-indentで表示しているテキストを飛ばし、display: block;でブロック要素に変えています。
※この時width、height指定を忘れないようにしましょう。

#globalNavi a	{
	width: 110px;
	height: 50px;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}

li要素を横並びにしています。

#globalNavi li	{
	float: left;
}

ここで、それぞれのリンク要素の画像を読み込んでいます。

#globalNavi .gnavi01 a	{
	background: url(image/g_navi01.jpg) no-repeat;
}
#globalNavi .gnavi02 a	{
	background: url(image/g_navi02.jpg) no-repeat;
}
#globalNavi .gnavi03 a	{
	background: url(image/g_navi03.jpg) no-repeat;
}
#globalNavi .gnavi04 a	{
	background: url(image/g_navi04.jpg) no-repeat;
}
#globalNavi .gnavi05 a	{
	background: url(image/g_navi05.jpg) no-repeat;
}

hove後の画像をここで指定。

#globalNavi a:hover	{
	background-position: 0 -50px;
}