Convert menu to tab with CSS

Question

I have a menu with tabs, but the active tabs doesn't merge with the background, so it's not a real tab. How can i apply the border white to the active tab so it looks like it merges with the content background, but without deleting the top grey border of the content background?

Main structure:

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

For a better understanding, see my fiddle:

http://jsfiddle.net/La36c/1/
Note: You need to enlarge the width, otherwise you'll see the mobile version of the menu!

Answer 1

If I understand your problem correctly, you could do this little thing with .active:before:

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

I've made an updated fiddle for you