Efecto sombra con css? como mejorarlo

[Copia]

Hola amigos estoy haciendo un menu horizontal con sombra, inclinada a la izquierda inferior.

Tengo el siguiente codigo:

Código:

#nav {
	background: url(../images/menu_h.png) repeat-x;
	border:1px solid #7a6552;
	padding: .5em 2px;
	margin:0;
	padding:0;
	height:44px;
	/*margin: 10px 0px 5px 0px;*/
}

.blur{
	background: transparent url(../images/shadow1.png);
/*path to the 80%-transparent 1x1pixel black-colored background image*/
	padding: 0px;
}

.shadow{
	background: transparent url(../images/shadow2.png);
/*path to the 60%-transparent 1x1pixel black-colored background image*/
	color: inherit;
}

.shadow, #nav{
	position: relative;
	bottom: 2px;
	left: 2px;
}

y este es el orden html

Código:

 <div class="blur">
					<div class="shadow">
                    	     <div id="nav">
                             </div>                       
                    </div>
                </div>

y este es mi resultado:



la sombra esta inclinada a la izquierda pero aun esta por sobre toda la barra, y solo debe aparacer en la parte inferior izquierda.
pense que usando z-index en #nav podria hacer que sobresalga y no me salio.
Alguna sugerencia?