CSS: Border for list of elements, no overlap but highlighting possible

Question

I've a list of elements with a border. The border should not overlap. But: There may be elements which are invisible, and one element might be highlighted by a different border-color:

#navigation_bar {
  overflow: hidden;
  list-style-type: none;
  width: 100%;
}

#navigation_bar li {
  text-align: center;
  width: 32%;
  border: 1px solid black;
  margin-top: -1px;
}

#navigation_bar li.first {
  margin-top: 0px;
}

#navigation_bar li.hilighted {
  border: 1px solid red;
}

<ul id="navigation_bar">
  <li class="first">Projection</li>
  <li class="hilighted">Real-Time</li>
  <li style="display:none;">Invisible</li>
  <li>Cleanup</li>
</ul>

My problem is that either the borders overlap, or not the full border is highlighted (as you can see in my example, the bottom-border of "Real-Time" is black, but it should be red).

Any ideas how to do this just using css?

Here's my fiddle: http://jsfiddle.net/wk9ydo41/1/

Answer 1

To have the full highlighted border visible you need to elevate that element with z-index. However to use z-index you need a non-static positioning. You can use position: relative for it:

#navigation_bar {
  overflow: hidden;
  list-style-type: none;
  width: 100%;
}

#navigation_bar li {
  text-align: center;
  width: 32%;
  border: 1px solid black;
  margin-top: -1px;
}

#navigation_bar li.first {
  margin-top: 0px;
}

#navigation_bar li.hilighted {
  border: 1px solid red;
  position: relative;
  z-index: 100;
}

<ul id="navigation_bar">
  <li class="first">Projection</li>
  <li class="hilighted">Real-Time</li>
  <li style="display:none;">Invisible</li>
  <li>Cleanup</li>
</ul>