Menú "Shadow Colorful"

VISTA PREVIA

DISEÑO; Añadir Gadget; Javascript/HTML
Copiar & Pegar:

<style>
.menuSC a{
font-family: arial;
font-size: 13px;
padding:3px;
letter-spacing: 2px;
box-shadow: inset 9px 0 0px 0 #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:block;
text-align:center;
background: #fff;
color: #61d2d6; /* COLOR DE LETRA */
width: 300px; /* ANCHO DEL MENÚ */
border-right:10px solid #fff; /* BORDE DERECHO */
border-left:10px solid #ed146f; /* BORDE IZQUIERDO */
overflow: hidden;
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
.menuSC a:hover{
box-shadow: inset 1000px 0 0px 0 #ed146f;
color: #fff; /* COLOR DE LETRA {HOVER} */
border-right:10px solid #ed146f; /* BORDE DERECHO {HOVER} */
border-left:10px solid #000; /* BORDE IZQUIERDO {HOVER} */
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
</style>
<div class="menuSC">
<a href="LINK"> Title</a>
<a href="LINK"> Title</a>
<a href="LINK"> Title</a>
<a href="LINK"> Title</a>
<a href="LINK"> Title</a>
</div>

Edita Lo Marcado & La "Sombra Colorida" Observando La Imagen Principal:

9px & #FFF {ANCHO & COLOR DE LA SOMBRA "amarilla"}

#ed146f {COLOR DE LA SOMBRA AL PASAR EL CURSOR}

Guarda & Listo!♥