サイドナビ、サイドメニューを画像で作る。

HTMl

<div class="mod_Sidemenu002">
<h3><img src="Sidemenu_002title.jpg" width="200" height="40" alt="タイトル" /></h3>
<ul>
<li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li>
<li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li>
<li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li>
<li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li>
<li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li>
<li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li>
</ul>
<!-- mod_Sidemenu002_end --></div>

CSS

.mod_Sidemenu002{
	width:200px;
	padding:10px;
	background-color:#DDD;
}
.mod_Sidemenu002 h3{
}
.mod_Sidemenu002 ul{
	border-top:solid 1px #CCC;
}
.mod_Sidemenu002 ul li{
	height:40px;
	overflow:hidden;
	vertical-align:bottom; /* IE6で画像下の隙間削除 */
	border-bottom:solid 1px #CCC;
}
.mod_Sidemenu002 ul li a{
	display:block;
}
.mod_Sidemenu002 ul li a:link    {text-decoration:none;}
.mod_Sidemenu002 ul li a:visited {text-decoration:none;}
.mod_Sidemenu002 ul li a:hover   {margin-top:-40px;}
.mod_Sidemenu002 ul li a:active  {margin-top:-40px;}