使用CSS將菜單轉換為選項卡

Question

我有一個帶有標簽的菜單，但是活動標簽不會與background合並，因此它不是真正的標簽。 如何將border white應用於活動選項卡，使其看起來像與內容背景合並，但又不刪除內容背景的頂部灰色邊框？

主要結構：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://getbootstrap.com/examples/starter-template/#">ArqOS Scheduler</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="nodes.html">Nodes</a></li>
        <li  class="active"><a href="tasks.html">Tasks</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

<div class="container-fluid">blabalbla the content</div>

為了更好的理解，請參閱我的小提琴：

http://jsfiddle.net/La36c/1/
注意 ：您需要擴大寬度，否則您將看到菜單的移動版本！

Answer 1

如果我正確理解了您的問題，則可以使用.active:before ：

.active:before {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 5px;
    background: #FFFFFF;
}

我為你做了更新的小提琴