html - 如何从我的导航中摆脱边框底部

Question

这是我当前导航的图像：

这是我想要的样子：

对我来说，主要问题是当我ul已经border-bottom设置并且由于某种原因我无法克服li它时，我被卡住了，真的不知道该进一步尝试什么。到目前为止，这是我的 CSS：

#section-body ul.tablenavigation {
  font-family: "Helvetica Neue",Helvetica Neue,Helvetica,Arial,sans-serif;
  list-style-type: none;
  position: relative;
  text-align: left;
  font-size: 19.4px;
  margin: 0px;
  padding: 0px 20px 0px 3px;
  color:#6a6a6a;
  background-color:#f4f4f4;
  border-bottom: 1px solid #ddd;
  width: 1825px;
}

#section-body ul.tablenavigation li {
  display: inline-block;
  padding: 20px 25px 20px 25px;
  margin: 0px 0px 0px -5px;
  border-right: 1px solid #fff;
}

#section-body ul.tablenavigation li a{
 color:#6a6a6a;
}

#section-body ul.tablenavigation li a:hover{
 color:#969696;
}

#section-body ul.tablenavigation li.active {
  color:#d4c58b;
  background-color: #fff;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

HTML：

<ul class="tablenavigation cps-tablenavigation">
                            <li><a href="#">DELIVERY</a></li>
                            <li><a href="#">ITEMS</a></li>
                            <li class="active"><a href="#">BILLING</a></li>
                            <li><a href="#">PERFORMANCE</a></li>
</ul>

我该怎么做才能使这个边框在BILLING隐形下或以某种方式让这个白色背景超出边框。

Answer 1

这是CSS

#section-body ul.tablenavigation li.active {
    color:#d4c58b;
    background-color: #fff;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    top:1px;
    position: relative;
}

这是小提琴

Answer 2

由于您不能将底部边框单独应用于列表项，因此您可以使用该box-shadow属性的垂直偏移值并指定白色以与第三个列表项的红色底部边框重叠。

.tablenavigation li {
display: inline-block;
}

.tablenavigation li.active {
display: inline-block; 
box-shadow: 0 01px white;
}

jsFiddle