liを横並びにして作るパンくずリスト

デモページへopen_in_new

HTMl

<div class="mod_breadcrumbs001">
<ol>
<li><a href="#">HOME</a></li>
<li><a href="#">ページ01</a></li>
<li><a href="#">ページ02</a></li>
<li><a href="#">ページ03</a></li>
<li><a href="#">ページ04</a></li>
<li>現在のページ</li>
</ol>
<!-- mod_breadcrumbs001_end --></div>

CSS

.mod_breadcrumbs001 ol li{
	display:inline;
}
.mod_breadcrumbs001 ol li a{
	padding:0 12px 0 0;
	background:transparent url("breadcrumbs_001.gif") no-repeat 100% 45% scroll;
}
.mod_breadcrumbs001 ol li a:link    {color:#666; text-decoration:none;}
.mod_breadcrumbs001 ol li a:visited {color:#666; text-decoration:none;}
.mod_breadcrumbs001 ol li a:hover   {color:#666; text-decoration:underline ;}
.mod_breadcrumbs001 ol li a:active  {color:#666; text-decoration:underline ;}