Descida z-index logicamente
<div id="crumbs">
<a href="#" style="z-index: 4;">Workplace Standards</a> >
<a href="#" style="z-index: 3;">Resources</a> >
<a href="#" style="z-index: 2;">Guides</a> >
<a href="#" style="z-index: 1;">Public holidays</a>
</div>
Eu tenho um simples navegador breadcrumb, o JQuery pode atribuir um z-index decrescente para cada link no div como o código acima? Atualmente imprime os links sem z-index para que pareçam ruins.
Como eu quero que pareça:
Como parece atualmente:
CSS
Os únicos jogadores-chave reais no CSS são a posição e a margem esquerda, mas aqui está na sua totalidade :)
#crumbs a {
display: inline-block;
position: relative;
padding: .5em 1em;
background: #e3e3e3;
border: 1px solid #c9c9c9;
box-shadow: inset 0px 1px 0px #f6f6f6;
border-radius: 1em 2em 2em 1em;
margin-left: -.6em;
}