<div id="breadcrumb">

      <ul class="crumbs">

          <li class="first"><a href="#" style="z-index:9;"><span></span>Blog Home</a></li>

          <li><a href="#" style="z-index:8;">Archives</a></li>

          <li><a href="#" style="z-index:7;">2011 Writing</a></li>

          <li><a href="#" style="z-index:6;">Tips for jQuer</a></li>

      </ul>

  </div>  

.crumbs { display: block; }

    .crumbs li {  display: inline; }

    .crumbs li.first { padding-left: 8px; }

    .crumbs li a,

    .crumbs li a:link,

    .crumbs li a:visited {

        color: #666;

        display: block;

        float: left;

        font-size: 12px;

        margin-left: -13px;

        padding: 7px 17px 11px 25px;

        position: relative;

        text-decoration: none;

    }

    .crumbs li a {

        background-image: url(/assets/stylesheets/images/bg-crumbs.png);

        background-repeat: no-repeat;

        background-position: 100% 0;

        position: relative;

    }

    .crumbs li a:hover {

        color: #333;

        background-position: 100% -48px;

        cursor: pointer;

    }

    .crumbs li a:active {

        color: #333;

        background-position: 100% -96px;

    }

    .crumbs li.first a span {

        height: 29px;

        width: 3px;

        border-left: 1px solid #d9d9d9;

        position: absolute;

        top: 0px;

        left: 0px;

    }