Html 如何从我的导航中去除边框底部

这是我当前导航的图像，我有：

以下是我希望的情况：

对我来说，主要问题是当我的

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>

我该怎么做才能使

账单下方的边框不可见，或者以某种方式使边框上方的白色背景不可见。
这是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;
}

这里是
因为不能将底部边框单独应用于列表项，所以可以使用
框阴影
属性的垂直偏移值，并指定白色以重叠第三个列表项的红色底部边框

.tablenavigation li {
display: inline-block;
}

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

只是好奇，为什么你不能从UL中移除边框底部并将其放在你的LIs上？因为my
UL
需要包围右边的剩余空间，而不是显示在此图像上不幸的是，IE 9下面不支持它