如何从导航中摆脱边界底部

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;
}

这是fiddle

Answer 2

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

.tablenavigation li {
display: inline-block;
}

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

jsFiddle