CSSで作るapple.comのようなナビゲーション[CSS]

背景画像の作成は必要です。

XHTML

<ul id="breadcrumb">
    <li><a href="#" title="Home"><img src="home.png" alt="Home" class="home" /></a></li>
    <li><a href="#" title="Sample page 1">Sample page 1</a></li>
    <li><a href="#" title="Sample page 2">Sample page 2</a></li>
    <li><a href="#" title="Sample page 3">Sample page 3</a></li>
    <li>Current page</li>
</ul>

CSS

#breadcrumb
{
    font: 11px Arial, Helvetica, sans-serif;
    background-image:url('bc_bg.png');
    background-repeat:repeat-x;
    height:30px;
    line-height:30px;
    color:#9b9b9b;
    border:solid 1px #cacaca;
    width:100%;
    overflow:hidden;
    margin:0px;
    padding:0px;
}

#breadcrumb li
{
    list-style-type:none;
    float:left;
    padding-left:10px;
}

#breadcrumb a
{
    height:30px;
    display:block;
    background-image:url('bc_separator.png');
    background-repeat:no-repeat;
    background-position:right;
    padding-right: 15px;
    text-decoration: none;
    color:#454545;
}

#breadcrumb a:hover
{
    color:#35acc5;
}

.home
{
    border: none;
    margin: 8px 0px;
}

コチラより、ソース一覧から背景画像すべてがダウンロードできます。