网站Breadcrumbs

Question

我正在一个网站上工作，并希望添加边界半径的面包屑。我在尝试使它看起来像第二个和第三个子z索引的面包屑时遇到了麻烦。 我想实现的是第二个和第三个孩子在之前的列表下。

JS小提琴http://jsfiddle.net/1cnh7bz7/1/

这是我的代码

.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> 

任何帮助appriciated

Answer 1

我已经使用上了z-index一点的黑客攻击，使其工作。首先，你在使用z-index时没有使用位置值，所以它没有效果。请参阅.uk-breadcrumb > li + li行，它将目标li与另一个li相邻，并使用其中的多个来确定它是第一个，第二个还是第三个，然后应用正确的z-索引。

我已经在10岁开始了z-index，但是可以在任意数量的时候开始，但是如果我们想要4个级别而不是3个，那么从高于需要的位置开始可以更容易地添加一个级别。我相信社会可以找到一种更好的方式通过nexting，而不是做，但这会工作不够好......

.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>