hsl(8%, 100%, 50%, 1)
hsl(8%, 100%, 50%, .8)
hsl(8%, 100%, 50%, .6)

The difference between using an <ol> and a bunch of nested <ul>s is how you perceive the way breadcrumbs work.

For the <ol> case:

Begin at “Top Level”
Continue to “Second Level”
Continue to “Third Level”
Finish at “Current Item”

For the nested <ul> case:

Begin at the list of links in the “Top Level”
Choose “Second Level” from the next list of choices
Choose “Third Level” from the next list of choices
Choose “Current Item” from the next list of choices

I suppose it depends on whether you want to view it as a direct path/causal relationship (<ol>) or as a series of choices showing only the chosen items (<ul>).

Doing this, along with adding z-index starting with 1 at the lowest level and ending at (for this example) 5 at the highest level, and using rgb instead of hsla, gives you IE8 support.

Test case on Snipplr

thanks
vara