1 <div id="breadcrumb">  2      <ul class="crumbs">  3          <li class="first"><a href="#" style="z-index:9;"><span></span>Blog Home</a></li>  4          <li><a href="#" style="z-index:8;">Archives</a></li>  5          <li><a href="#" style="z-index:7;">2011 Writing</a></li>  6          <li><a href="#" style="z-index:6;">Tips for jQuer</a></li>  7      </ul>  8  </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;      }