Site Breadcrumbs

Question

Je travaille sur un site et je veux ajouter de la chapelure avec un rayon de bordure. J'ai du mal à essayer de faire en sorte que ça ressemble à de la chapelure avec les index 2e et 3e enfants. Ce que je veux atteindre est le 2ème et 3ème enfant sous la liste précédente.

JS Fiddle http://jsfiddle.net/1cnh7bz7/1/

c'est mon code

.uk-breadcrumb > li { 
    font-size: 1rem; 
    vertical-align: top; 
    border: 1px solid #000000; 
    border-radius: 500px; 
    padding: 0 15px; 
    background: #ffffff; 
    margin-left: -20px; 
} 

.uk-breadcrumb > li, 
.uk-breadcrumb > li > a, 
.uk-breadcrumb > li > span { 
    display: inline-block; 
    z-index: 1; 
} 
.uk-breadcrumb .uk-active { 
    background: #eeeeee; 
    border: 1px solid #eeeeee; 
    z-index: 2; 
} 
<div class="bh-breadcrumbs"> 
<ul class="uk-breadcrumb uk-hidden-small"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#" title="Culture">Culture</a></li> 
    <li class="uk-active"><span>arts</span></li> 
</ul> 
</div> 

toute aide appriciated

Answer 1

Je l'ai utilisé un petit hack sur le z-index pour le faire fonctionner. Tout d'abord, vous jouiez avec z-index sans utiliser de valeur de position, donc cela n'a eu aucun effet. Voir les lignes .uk-breadcrumb > li + li, il cible un élément li à côté d'un autre li et utilisé plusieurs de ceux-ci pour déterminer si c'est le premier, deuxième ou troisième et ensuite appliqué l'index z correct.

J'ai commencé le z-index à 10 mais je pouvais commencer à n'importe quel nombre, mais commencer plus haut que nécessaire me permet d'ajouter simplement un niveau si nous voulions 4 niveaux au lieu de trois. Je suis sûr que la communauté peut trouver une meilleure façon de le faire par nexting à la place, mais cela fonctionner assez bien ...

.uk-breadcrumb > li { 
 
    font-size: 1rem; 
 
    vertical-align: top; 
 
    border: 1px solid #000000; 
 
    border-radius: 500px; 
 
    padding: 0 15px; 
 
    background: #ffffff; 
 
    margin-left: -20px; 
 
} 
 
.uk-breadcrumb > li { 
 
    z-index: 10; 
 
} 
 
.uk-breadcrumb > li + li { 
 
    z-index: 9; 
 
} 
 
.uk-breadcrumb > li + li+ li { 
 
    z-index: 8; 
 
} 
 
.uk-breadcrumb > li, 
 
.uk-breadcrumb > li > a, 
 
.uk-breadcrumb > li > span { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.uk-breadcrumb .uk-active { 
 
    background: #eeeeee; 
 
    border: 1px solid #eeeeee; 
 
}

<div class="bh-breadcrumbs"> 
 
    <ul class="uk-breadcrumb uk-hidden-small"> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#" title="Culture">Culture</a> 
 
    </li> 
 
    <li class="uk-active"><span>arts</span> 
 
    </li> 
 
    </ul> 
 
</div>