CSS for breadcrumb navigation

HTML code:

1 <DivID= "breadcrumb">  2      <ulclass= "Crumbs">  3          <Liclass= "First"><ahref="#"style= "Z-index:9;"><span></span>Blog Home</a></Li>  4          <Li><ahref="#"style= "Z-index:8;">Archives</a></Li>  5          <Li><ahref="#"style= "Z-INDEX:7;">Writing</a></Li>  6          <Li><ahref="#"style= "Z-INDEX:6;">Tips for Jquer</a></Li>  7      </ul>  8  </Div>  

CSS code:

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

Design Picture:

Article Original address: http://www.hongkiat.com/blog/breadcrumb-menu-css3/

Achieve effect: http://media02.hongkiat.com/css3-breadcrumb/demo/index.html#

CSS for breadcrumb navigation