Semantic CSS breadcrumbs

Generally, breadcrumbs trails are made with the following markup:

<div id="breadcrumbs">
  <a href="#">Home</a> &gt
 <-- Other links -->
 Current section
</div>

Wrong, totally wrong and completely non-semantic, because it doesn't resemble the tree hierarchy of the directories. Here's a better approach:

<ul id="breadcrumbs">
  <li><a href="#">Home</a>

     <ul>
         <li><! -- Another link -->
         
                <ul>
                     
                         <li><strong>Current section</strong></li>         
                     
                </ul>        
         
         </li>
    </ul>

  </li>
</ul>

That's semantic, instead and here's how we can stylize it with CSS:

#breadcrumbs {
  margin: 0;
  padding: 0;
  list-style: none;
}

#breadcrumbs li, #breadcrumbs ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline;
}

#breadcrumbs li a {
    padding-right: 0.4em;
    margin-right: 0.3em;
   background: url("img/arrow-right.gif") no-repeat 100% 0;
}

That's it. Hope that helps!