box shadow not going over background color of contained element

Question

Basically I have a side bar that has an inset box shadow and inside that sidebar is a list of elements whose background color is orange... I would like to be able to make the inset box shadow overlap the background color of the list item.

Here is an image of the desired effect:

And here is the effect I am currently getting:

Notice how my inset box shadow isn't going over the orange background? How would I be able to accomlish this?

Answer 1

box-shadow on the parent element will not go over the child element the same as the background color of the parent doesn't go over the child element's background.. you will have to assign the box-shadow to the child as well.. this is a jsFiddle of the problem.

To solve this you will have to use something like this:

.child{
    -webkit-box-shadow: inset 10px 0px 10px -10px rgba(0, 0, 0, 1),inset -10px 0px 10px -10px rgba(0, 0, 0, 1);
    box-shadow: inset 10px 0px 10px -10px rgba(0, 0, 0, 1),inset -10px 0px 10px -10px rgba(0, 0, 0, 1);
}

This will create two shadows one from each side of the child element, which will look seamless with the parent's box-shadow.

View this working jsFiddle