Снимите нижнюю коробчатую тень, отлитую от следующего div

Question

Что у меня есть:

У меня есть меню навигации с тенями теней, назначенными каждой из ссылок.

Сразу под навигационным меню следует 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>

Answer 1

Очень просто:

Просто добавьте position:relative; к div

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

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

Почему это работает?

В принципе, вам нужно будет установить контексты стекирования, чтобы сделать слои с использованием z-индекса.

Для этого вам необходимо иметь явно определенное позиционирование и z-индекс для слоев.

BUT, так как в вашем случае это только два слоя, контейнер ссылок и панель под ним, вы можете опустить дополнительные определения, поскольку определение позиционирования на панели ниже ссылок является достаточным.

Это длинная версия о том, что будет делать работу за вас:

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

Demohttp://jsfiddle.net/a2wLb1fz/1/