○○編・・・
とか言うほどのものでもないですが、自分の覚書を兼ねての投稿です。
まずは通常とマウスオーバーを一緒に切り出します。

そんでもって、１つ１つのボタンのサイズを測っておきます。
で、以下のソースです。

HTML側のソース

<div id="Navigation">
<ul>
<li class="b1"><a href="/aboutus.php"><img src="navi.jpg" alt="TOP" /></a></li>
<li class="b2"><a href="/campaign.php"><img src="navi.jpg" alt="MENU" /></a></li>
<li class="b3"><a href="/faq.php"><img src="navi.jpg" alt="CONTACT" /></a></li>
<li class="b4"><a href="/voice.php"><img src="navi.jpg" alt="ABOUT US" /></a></li>
</ul>
</div>

CSS側のソース

#Navigation{
	clear:both;
	margin:0;
	padding:0;
	height: 40px;
	width: 600px;
}

#Navigation ul{
	margin:0;
	padding: 0px;
	list-style: none;
}

#Navigation ul li{
	margin: 0;
	padding: 0px;
	height: 40px;
	overflow:hidden;
	position:relative;
	float:left;
}
#Navigation ul li a{ position:relative; }
#Navigation ul li a:hover{ border:none; }

#Navigation ul li.b1{ width:120px; }
#Navigation ul li.b1 a{
	top:0;
	left:0;
}
#Navigation ul li.b2{ width:135px; }
#Navigation ul li.b2 a{
	top:0;
	left:-120px;
}
#Navigation ul li.b3{ width:155px; }
#Navigation ul li.b3 a{
	top:0;
	left:-255px;
}
#Navigation ul li.b4{ width:190px; }
#Navigation ul li.b4 a{
	top:0;
	left:-410px;
}
#Navigation ul li a:hover{ top:-40px; }

今いるページでナビの画像をマウスオーバー時に指定したい場合は、
Navigationのdivより前で各ページ名のクラスで包み込んで、以下のソースをcss側に追加です。

#Navigation ul li.b1 a:hover,
.Top #Navigation ul li.b1 a{
	top:-40px;
	left:0;
}

#Navigation ul li.b2 a:hover,
.Menu #Navigation ul li.b2 a{
	top:-40px;
	left:-120px;
}

#Navigation ul li.b3 a:hover,
.Contact #Navigation ul li.b3 a{
	top:-40px;
	left:-255px;
}

#Navigation ul li.b4 a:hover,
.Aboutus #Navigation ul li.b4 a{
	top:-40px;
	left:-410px;
}
タグ:, , ,