Html 站点面包屑

我在一个网站上工作，想添加具有边界半径的面包屑。我很难让它看起来像第二个和第三个孩子z索引的面包屑。 我想要实现的是前一个列表中的第二个和第三个孩子。

JS小提琴

这是我的密码

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

.uk面包屑>li{
字号：1rem；
垂直对齐：顶部；
边框：1px实心#000000；
边界半径：500px；
填充：0 15px；
背景：#ffffff；
左边距：-20px；
}
.uk面包屑>李，
.uk面包屑>李>a，
.uk面包屑>李>跨度{
显示：内联块；
z指数：1；
}
.uk breadcrumb.uk活动{
背景：#eeeeee；
边框：1px实心#eeeeee；
z指数：2；
}



艺术

---

任何得到的帮助

我对

z-index

进行了一些修改，使其正常工作。首先，您使用的是

z-index

，没有使用位置值，因此没有任何效果。请参见行

.uk breadcrumb>li+li

它将一个元素

li

定位在另一个元素

li

旁边，并使用这些元素的倍数来确定它是第一个、第二个还是第三个，然后应用正确的z指数

我已经在10开始了

z-index

，但是可以从任何数字开始，但是如果我们想要4个级别而不是3个级别，那么从更高的级别开始就可以更容易地添加一个级别。我相信社区可以通过nexting找到一个更好的方法，但这将很好地工作

.uk面包屑>li{
字号：1rem；
垂直对齐：顶部；
边框：1px实心#000000；
边界半径：500px；
填充：0 15px；
背景：#ffffff；
左边距：-20px；
}
.uk面包屑>李{
z指数：10；
}
.uk面包屑>李+李{
z指数：9；
}
.uk面包屑>李+李+李{
z指数：8；
}
.uk面包屑>李，
.uk面包屑>李>a，
.uk面包屑>李>跨度{
显示：内联块；
位置：相对位置；
}
.uk breadcrumb.uk活动{
背景：#eeeeee；
边框：1px实心#eeeeee；
}

艺术

请您把您面临的问题讲清楚，好吗？小提琴看起来对我来说是正确的…更新了问题并添加了我想要实现的形象