html - 次の div にキャストされている下部のボックス シャドウを削除します

Question

私が持っているもの：

各リンクにボックス シャドウが割り当てられたナビゲーション メニューがあります。

ナビゲーション メニューのすぐ下には、リンクの下部に触れる div があります。

ボックスの影の下部は、タブ付きのインターフェイスの錯覚を壊します。

必要なもの:

リンクのボックス シャドウが次の div にキャストされないようにする必要があります。

私のコード:

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>