Помогите решить проблему с css

Приветствую.

Суть проблемы в следующем: при установке цвета блоку пропадает пересечение тени с другим блоком. Без установки цвета блоку пересечение работает нормально.

Ссылка на jsfiddle

Для наглядности - картинка (врхний блок без заливки отображает тень, нижний нет):

html + css:

<style>

  body{

    background: #f7f7f7;

  }

  .wrap, .wrap1{

    width: 500px;

    margin: 50px auto;

  }



  .section{

    width: 20%;

    float: left;

  }



  .goods{

    border: 1px solid #e6e6e6;

    height: 100px;

    margin: -1px 0 0 -1px;

    padding: 15px;

    height: 100px;

    display: block;

  }

  .goods:hover{box-shadow: rgba(0, 0, 0, 0.14902) 0px 2px 10px 0px;}



  .wrap1 .goods{

    background: #FFF;

  }

</style>



<div class="wrap">



  <div class="section">

    <div class="goods">-</div>

  </div>



  <div class="section">

    <div class="goods">-</div>

  </div>



  <div class="section">

    <div class="goods">-</div>

  </div>



  <div class="section">

    <div class="goods">-</div>

  </div>



  <div class="section">

    <div class="goods">-</div>

  </div>

</div>



<br><br><br><br><br><br><br><br><br><br>



<div class="wrap1">



  <div class="section">

    <div class="goods">-</div>

  </div>



  <div class="section">

    <div class="goods">-</div>

  </div>



  <div class="section">

    <div class="goods">-</div>

  </div>



  <div class="section">

    <div class="goods">-</div>

  </div>



  <div class="section">

    <div class="goods">-</div>

  </div>

</div>

Что можно сделать, чтобы тень при заливке блока отображалась?