Creating breadcrumb navigation

1. Add the list. In the HTML document, add the following code for the breadcrumbs.
Note that the last item signifies the current page—this is why it’s not a link.
<ul id="breadcrumbs">
<li><a href="#">Home page</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Live gigs</a></li>
<li>London, 2008</li>
</ul>

2. Add some body padding. Add a padding value to the existing body rule.
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}

3. Style the list by adding the following rule. The font-size setting specifies the font
size for the list items, and the margin-bottom setting adds a margin under the list.
ul#breadcrumbs {
font-size: 1.2em;
margin-bottom: 1em;
}

4. Add the following rule to style the list items. By setting display to inline, list
items are stacked horizontally. The background value sets double-arrow.gif as the
background to each list item (ensure it’s in the same directory as the CSS document,
or modify the path accordingly); the positioning values ensure the background
is set at 0 horizontally and 50% vertically, thereby vertically centering it at
the left—at least once no-repeat is set, which stops the background tiling. Finally,
the padding value sets padding at the right of each list item to 10px, ensuring items
don’t touch the subsequent background image; the left padding value of 15px
provides room for the background image, ensuring the list item text doesn’t sit on
top of it.
#breadcrumbs li {
display: inline;
background: url(double-arrow.gif) 0 50% no-repeat;
padding: 0 10px 0 15px;
}

**Note that when list items are displayed inline, the default bullet points are not displayed.
This is one reason why the bullets in this example are background images,
although we also wanted something more visually relevant, right-facing arrows showing
the path direction.