Menu con Javascript y jQuery – Efecto Sombra

<ul class="lavaLamp"> 
             <li><a href="#">Home</a></li> <li> <a href="#"> Inicio </ a> </ li> 
             <li><a href="#">Plant a tree</a></li> <li> <a href="#"> Planta un árbol </ a> </ li> 
             <li><a href="#">Travel</a></li> <li> <a href="#"> Viajes </ a> </ li> 
             <li><a href="#">Ride an elephant</a></li> <li> <a href="#"> paseo un elefante </ a> </ li> 
         </ul> </ ul>

/ * Estilos para la totalidad del menú LavaLamp * / 
 .lavaLamp { . lavaLamp ( 
     position: relative; posición: pariente; 
     height: 29px; width: 421px; altura: 29px; ancho: 421px; 
     background: url("../image/bg.gif") no-repeat top; fondo: url ("../ imagen / bg.gif ") no-repeat top; 
     padding: 15px; margin: 10px 0; padding: 15px; margin: 10px 0; 
     overflow: hidden; desbordamiento: oculto; 
 } ) 
     /* Force the list to flow horizontally */ / * Fuerza de la lista para el flujo horizontal * / 
     .lavaLamp li { . lavaLamp li ( 
         float: left; flotador: izquierda; 
         list-style: none; lista de estilo: ninguno; 
     } ) 
         /* Represents the background of the highlighted menu-item. / * Representa el fondo del menú resaltado. */ * / 
         .lavaLamp li.back { . lavaLamp li.back ( 
             background: url("../image/lava.gif") no-repeat right -30px; fondo: url ("../ imagen / lava.gif ") no se repita la derecha 30px; 
             width: 9px; height: 30px; anchura: 9PX; altura: 30px; 
             z-index: 8; z-index: 8; 
             position: absolute; position: absolute; 
         } ) 
             .lavaLamp li.back .left { . lavaLamp li.back. izquierda ( 
                 background: url("../image/lava.gif") no-repeat top left; fondo: url ("../ imagen / lava.gif ") de no repetir parte superior izquierda; 
                 height: 30px; altura: 30px; 
                 margin-right: 9px; margen derecha: 9PX; 
             } ) 
         /* Styles for each menu-item. / * Estilos para cada menú. */ * / 
         .lavaLamp li a { . lavaLamp una li ( 
             position: relative; overflow: hidden; posición: pariente; desbordamiento: oculto; 
             text-decoration: none; text-decoration: none; 
             text-transform: uppercase; texto-transformar: mayúsculas; 
             font: bold 14px arial; font: 14px Arial negrita; 
             color: #fff; outline: none; color: # fff; esbozo: ninguno; 
             text-align: center; alinear texto: centro; 
             height: 30px; top: 7px; altura: 30px; arriba: 7px; 
             z-index: 10; letter-spacing: 0; z-index: 10; carta de espaciamiento: 0; 
             float: left; display: block; flotador: izquierda; pantalla: bloque; 
             margin: auto 10px; margin: 10px auto; 
         } )

 <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/jquery.js"> </ script> 
 <script type="text/javascript" src="path/to/jquery.lavalamp.js"></script> <script type="text/javascript" src="path/to/jquery.lavalamp.js"> </ script> 
 <!-- Optional --> <! - Opcional -> 
 <script type="text/javascript" src="path/to/jquery.easing.js"></script> <script type="text/javascript" src="path/to/jquery.easing.js"> </ script> 
 
 <script type="text/javascript"> <script type="text/javascript"> 
     $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })}); $ (function () ($ ( ". lavaLamp"). lavaLamp ((fx: "backout", velocidad: 700 })}); 
 </script> </ script>