Breadcrumb(s) is a term used to describe hierarchical links that tell the visitor where he/she currently is on your site. Visually breadcrumbs are just links with some sort of separator between them, such as a bullet image. This CSS code transforms ordinary looking links into a breadcrumb by giving each link a background image.

There are many different ways to implement breadcrumbs in CSS. This is one; it works in all three major browsers. I will just give the style sheet, rest you can work out-

style type="text/css" .breadcrumb{ font: bold 12px "Lucida Grande", sans-serif; } .breadcrumb a{ background: transparent url(media/breadcrumb.gif) no-repeat center right; text-decoration: none; padding-right: 10px; /*adjust bullet image padding*/ color: red; } .breadcrumb a:visited, .breadcrumb a:active{ color: red; } .breadcrumb a:hover{ text-decoration: underline; } end of style sheet