Styling breadcrumbs (that is, breadcrumbs navigation) with CSS is not so difficult as it could seem at first glance, provided that we bear in mind semantics while building up our base markup. The best choice, in fact, is to use nested unordered lists in order to keep the directory hierarchy intact. Here's how our markup would look like:
<ul id="breadcrumbs"><li class="first-level"><a href="#">Home</a><ul><li class="second-level"><a href="#">Articles</a><ul><li class="last"><strong>Current location</strong></li></ul></li></ul></li></ul>
Why am I writing all the markup on a single line? It's just to prevent Internet Explorer 6 from applying some of its weird calculations of white-space among the various list elements. Notice how I also added some classes in order to apply different styles on each breadcrumb level. In this case, I'm willing to apply only a single background image, but in an ideal scenario you could apply different background images on each level. Here's the CSS:
/* Basic breadcrumbs formatting */
#breadcrumbs {
margin: 0;
padding: 0;
list-style: none;
height: 1.3em;
border-bottom: 1px solid #666;
line-height: 1.3em;
}
#breadcrumbs li ul, #breadcrumbs li {
display: inline;
margin: 0;
padding: 0;
}
/* Add a background image */
#breadcrumbs li.first-level a,
#breadcrumbs li.second-level a {
margin: 0 0.5em 0 0;
background: transparent url("arrow.png") no-repeat 100% 0.3em;
padding-right: 13px;
}
#breadcrumbs li.last {
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #666;
background: #fff;
padding: 0 0.3em;
position: relative;
top: 2px;
}
We've turned every block level and list-item element (ul, li) into an inline element so that our items will appear on a single row. Then we've added a background image to each link. However, Internet Explorer 6 and 7 need the following code:
<!--[if lt IE 8]>
<style type="text/css" media="screen">
#breadcrumbs li.last {
position: relative;
top: 1px;
}
</style>
<![endif]-->
You can see the final result here.