CSS：滚动期间重叠的框阴影

Question

我在菜单和内容周围添加了一个阴影，当内容滚动时，阴影重叠。

示例：http://jsfiddle.net/ewe5eg59/4/

<div class="menu">menu</div>
<div class="content">content</div>

body {
    margin-top: 0;
}
div {
    width: 100px;
    box-shadow: 0px 0px 10px black;
}
div.menu {
    height: 40px;
    position: fixed;
    background-color:blue;
}
div.content {
    height: 1000px;
    background-color: yellow;
    position: absolute;
    margin-top: 40px;
    z-index: -100;
}

我该如何解决这个问题？

已解决（感谢Anahit Ghazaryan）：

http://jsfiddle.net/ewe5eg59/34/

<div class="wrap">
    <div class="menu">menu</div>
    <div class="content">content</div>
</div>

body {
    margin-top: 0;
}
div {
    width: 100px;
}
.wrap {
    box-shadow: 0px 0px 6px black;
    height:1046px;
    margin-top: -6px;
}
div.menu {
    height: 40px;
    position: fixed;
    background-color: blue;
    margin-top: 6px;
    /* box-shadow: 0px 0px 5px 2px black; */
    z-index: 100;
}
div.content {
    height: 1000px;
    background-color: yellow;
    position: absolute;
    padding-top: 46px;
}

Answer 1

如果你将div.content边距替换为填充，你的问题将会解决！这是代码

<div class="wrap">
   <div class="menu">menu</div>
   <div class="content">content</div>
</div>

和Css

body {
margin-top: 0;
}     
.wrap{
 width: 100px;
box-shadow: 0px 0px 6px black;
height:1039px;
  padding-top: 3px;
  }   div.menu {
   width: 100px; 
}
div.menu {
 height: 40px;
 position: fixed;
 background-color: blue;
 margin-top: -3px;
  box-shadow: 0px 0px 5px 2px black;
  z-index: 100;
  }
  div.content {
width:100px;
height: 1000px;
background-color: yellow;
position: absolute;
padding-top: 40px;
 }