css实现面包屑导航

HTML代码：

 <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>  

CSS代码：

.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;
    }  

设计图片：

文章原地址：http://www.hongkiat.com/blog/breadcrumb-menu-css3/

实现效果：http://media02.hongkiat.com/css3-breadcrumb/demo/index.html#