よく見るサイドメニューのサンプル

• サンプル1
• サンプル2
• サンプル3
• サンプル4

html

<ul class="navi">
<li><a href="#">サンプル1</a></li>
<li><a href="#">サンプル2</a></li>
<li><a href="#">サンプル3</a></li>
<li><a href="#">サンプル4</a></li>
</ui>

CSS

#contents .navi	{
	width: 180px;
}
#contents .navi li	{
	border-bottom: solid 1px #D1D1D1;
}
#contents .navi li a	{
	display: block;
	width: 160px;
	padding: 5px 5px 5px 15px;
	background: url(image/navi.jpg) no-repeat top left;
	text-decoration: underline;
	color: #333;
}
#contents .navi li a:hover	{
	background: url(image/navi_on.jpg) no-repeat top left;
	padding: 5px 5px 5px 20px;
	text-decoration: underline;
	color: #999;
}