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

这里是 fiddle