サイドナビ、サイドメニューをテキストで作る。

HTMl

<div class="mod_Sidemenu001">
<h3>タイトル</h3>
<ul>
<li><a href="#">サイドメニュー</a></li>
<li><a href="#">サイドメニュー</a></li>
<li><a href="#">サイドメニュー</a></li>
<li><a href="#">サイドメニュー</a></li>
<li><a href="#">サイドメニュー</a></li>
</ul>
<!-- mod_Sidemenu001_end --></div>

CSS

.mod_Sidemenu001{
	width:200px;
	padding:10px;
	background-color:#DEDEDE;
}
.mod_Sidemenu001 h3{
	padding:5px;
	color:#FFF;
	font-weight:bold;
	font-size:1.4em;
	background-color:#666;
}
.mod_Sidemenu001 ul{
	border:solid 1px #CCC;
	border-bottom:none;
}
.mod_Sidemenu001 ul li{
	line-height:3.0;
	border-bottom:solid 1px #CCC;
	background-color:#FFF;
}
.mod_Sidemenu001 ul li.first{
	border-top:solid 1px #CCC;
}
.mod_Sidemenu001 ul li a{
	width:178px; /* IE6用 */
	padding:0 0 0 20px;
	display:block;
	background:transparent url('Sidemenu_001.gif') no-repeat 5px 45% scroll;
}
.mod_Sidemenu001 ul li a:link    {color:#666; text-decoration:none;}
.mod_Sidemenu001 ul li a:visited {color:#666; text-decoration:none;}
.mod_Sidemenu001 ul li a:hover   {color:#666; background-color:#EEE;background-image: url('Sidemenu_001_over.gif');}
.mod_Sidemenu001 ul li a:active  {color:#666; background-color:#EEE;background-image: url('Sidemenu_001_over.gif');}