CSS nth child box shadow hidden

CSS nth child box shadow hidden

I am having trouble with the combination of the CSS selector
:nth-child(...) and the box-shadow effect. The desired effect is as
follows:
Even-numbered div elements in a container are given an alternating
background color.
When the user hovers over one of the div elements, a box shadow is
applied, giving the appearance of the "hovered" div "hovering" above the
following div.
However, I am running into a problem. While the box shadow is applied to
the "hovered" element, the effect is different for even-numbered div
elements as opposed to odd-numbered ones. Essentially, the shadow of each
even div overlaps the following odd div, while the shadow of each odd div
is rendered behind the following even div.
This pen demonstrates the issue better:
http://codepen.io/jtlovetteiii/pen/cEaLK
Here is the HTML snippet:
<div class="rows">
<div class="row"></div>
<div class="row"></div>
...
</div>
Here is the CSS:
.rows
{
background-color: #AAAAAA;
}
.rows .row:nth-child(even)
{
background-color: #E2E2E2;
}
.row
{
height: 20px;
cursor: pointer;
}
.row:hover
{
box-shadow: 0px 10px 10px #888888;
}
What am I missing?