Summary
<ul>と<li>だけでサイトマップを表現.lastitem クラスがミソ.
HTML Source
<ul id="linkList">
<li>
<a href="/">Home</a>
<ul>
<li>
<a href="/1/">2nd - 1</a>
<ul>
<li>
<a href="/1/1/">3rd - 1</a>
</li>
<li>
<a href="/1/2/">3rd - 2</a>
</li>
<li class="lastitem">
<a href="/1/3/">3rd - 3</a>
</li>
</ul>
</li>
<li>
<a href="/2/">2nd - 2</a>
<ul>
<li>
<a href="/2/1/">3rd - 1</a>
</li>
<li>
<a href="/2/2/">3rd - 2</a>
</li>
<li class="lastitem">
<a href="/2/3/">3rd - 3</a>
</li>
</ul>
</li>
<li class="lastitem">
<a href="/3/">2nd - 3</a>
<ul>
<li>
<a href="/3/1/">3rd - 1</a>
</li>
<li>
<a href="/3/2/">3rd - 2</a>
</li>
<li class="lastitem">
<a href="/3/3/">3rd - 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS Source
ul#linkList ul {
margin-left:0;
margin-bottom:1em;
padding-top:0.3em;
background:url("first-item.png") 20px 0px repeat-y;
line-height:1;
}
ul#linkList li{
list-style: none;
}
ul#linkList ul li{
margin:0.3em 0 0.3em 0;
padding-left:45px;
background:url("all-item.png") 20px 0.7em no-repeat;
}
ul#linkList ul li.lastitem{
background:url("last-item.png") 20px 0.5em no-repeat;
}
画像
Reference
ミツエーリンクス - サイトマップhttp://www.mitsue.co.jp/sitemap/