CSS box-shadow to one direction - shadow

Question

I am requested to make the following design:
Here's how I'm trying to achieve the cascaded shadow:
box-shadow: -6px 0px 10px #514E49
But it results in the shadow being displayed in the opposite direction:
I tried changing the h-shadow parameter to 6px, but then the shadow is only visible in the rightmost edge.
I tried using inset as Emil suggested, but it causes the v-shadow to display inset as well and becomes visible inside the box, which should be avoided, here is what it looks like:

Answer 1

try this:
box-shadow:inset 6px 0px 10px #514E49;
edit:
box-shadow: 6px 0px 10px #514E49;
float:right;
http://jsfiddle.net/6V7Et/4/
you have to reverse the order of the menu

Answer 2

Another way to avoid float:right and reversing the menu is by using a negative spread and increased h-shadow like this:
.box {
background: #817E77;
display: inline-block;
width: 100px;
height: 40px;
box-shadow: inset 10px 0px 10px -4px #514E49;
float:left;
}
jsFiddle result

Answer 3

I believe this will best be tackled with z-index since your problem is the other divs are hiding the previously rendered ones.
so:
.box {
....your stuff here....
float:right
}
http://jsfiddle.net/XKNn4/

Answer 4

Another solution, one that doesn't involve reversing the order of the menu or using z-index would be to put the box-shadow on a pseudo-element.
demo
Relevant CSS:
li {
overflow: hidden;
position: relative;
box-shadow: 6px 0px 10px #514E49;
/* the other styles */
}
li:not(:first-child):after {
position: absolute;
right: 100%; width: 100%; height: 100%;
box-shadow: 6px 0px 10px #514E49;
content: '';
}