Remove bottom box-shadow being cast on following div

Question

What I have:

I have a navigation menu with box-shadows assigned to each of the links.

Immediately beneath the navigation menu follows a div that touches the bottom of links.

The bottom of the box-shadow breaks the illusion of my tabbed interface.

What I need:

I need to prevent the box-shadow of the links from casting on the following div.

My code:

ul {
  list-style: outside none none;
  padding:0; margin:0;
}
li {
  display: inline-block;
}
a {
  background-color: grey;
  color: white;
  padding: 20px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: inline-block;
  text-decoration:none;
  box-shadow: 1px 1px 3px #222;
}
.selected a{
  background-color: blue;
}
div {
  background-color: blue;
  height: 20px;
}

<nav>
  <ul>
    <li class="selected"><a href="#">Home</a>
    </li>
    <li><a href="#">Link 2</a>
    </li>
    <li><a href="#">Link 3</a>
    </li>
  </ul>
</nav>

<div class="divider"></div>

Answer 1

Very simple:

Just add position:relative; to the div

div {
    position: relative; /* add this */
    background-color: blue;
    height: 20px;
}

Demo: http://jsfiddle.net/a2wLb1fz/

Why does this work?

Basically you will need to establish stacking contexts to make the layout layered using z-index.

To do this, you need to have an explicitly defined positioning and a z-index for the layers.

BUT, since in your case it's only two layers, the links container and the bar below it, you can omit the extra definitions since defining positioning on the bar below the links is sufficient.

This is a longer version of what will do the job for you:

nav {
    position: relative;
    z-index: 1;
}
div {
    position: relative;
    z-index: 2;
    background-color: blue;
    height: 20px;
}

Demo http://jsfiddle.net/a2wLb1fz/1/