CSS：滚动期间框阴影重叠

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

例如：

菜单
内容
身体{
边际上限：0；
}
div{
宽度：100px；
盒影：0px 0px 10px黑色；
}
分区菜单{
高度：40px；
位置：固定；
背景颜色：蓝色；
}
部门内容{
高度：1000px；
背景颜色：黄色；
位置：绝对位置；
边缘顶端：40px；
z指数：-100；
}

我怎样才能解决这个问题

已解决（感谢Anahit Ghazaryan）：

菜单
内容
身体{
边际上限：0；
}
div{
宽度：100px；
}
.包裹{
盒影：0px 0px 6px黑色；
高度：1046px；
利润上限：-6px；
}
分区菜单{
高度：40px；
位置：固定；
背景颜色：蓝色；
边缘顶部：6px；
/*盒影：0px 0px 5px 2px黑色*/
z指数：100；
}
部门内容{
高度：1000px；
背景颜色：黄色；
位置：绝对位置；
填充顶部：46px；
}

如果您将div.content边距替换为padding，您的问题将得到解决！这是密码

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

---

我在fiddler中对此进行了更新，但在最后一个像素的菜单顶部，我解释了重叠问题，阴影变得越来越弱。更新：谢谢，我做了一点修改，更新了问题的解决方案。

<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;
}

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

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;
 }