CSS: box-shadows overlapping during scrolling - css

Question

I added a shadow around my menu and the content, when the content are scrolled the shadows are overlapping.
Example: 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;
}
How can I fix this?
SOLVED (Thanks to 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

If you will replace the div.content margin to padding your issue will be solved!Here is the code
<div class="wrap">
<div class="menu">menu</div>
<div class="content">content</div>
</div>
And the 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;
}