lunes, 16 de abril de 2012

Videotutorial Menú Desplegable Avanzado HTML/CSS3 (Máster en Tecnologías Web)

En este video tutorial en HD y en español, vemos cómo realizar un menú desplegable horizontal avanzado utilizando HTML y CSS. Con las transiciones, transformaciones y animaciones de CSS3, podemos hacer que los elementos de la web se comporten como nosotros queramos y realizar diseños tan complejos como deseemos de una forma fácil y rápida.

50 comentarios:

  1. muy buenos los tutoriales !!!!

    una consulta , como isiste para tener el dreamweaver como con un tema negro??????

    ResponderEliminar
    Respuestas
    1. Muy buenas,

      Gracias! Pues en este video uso la plataforma de desarrollo Expression Web, por eso sale con ese tema, no es Dreamweaver.

      Cualquier consulta o duda sobre los videos o tecnologías Web estaré encantado de echarte una mano siempre que pueda. Un Saludo!

      Eliminar
  2. ¿Las animaciones de -moz sirven para el resto de navegadores, o sólo para Firefox?

    ResponderEliminar
    Respuestas
    1. ¿O si quieres que lo reproduzcan todos los navegadores tienes que multiplicar el codigo por cada uno de -o -webkit -ms...?

      Eliminar
    2. Buenas,

      Cada navegador tiene su prefijo, por aora hasta que no cumplan los estandares tendrás que duplicar el código.

      -moz - Mozilla Firefox
      -webkit - Google Chrome y Safari
      -o - Opera
      -ms - Internet Explorer (habrá que ver como se comporta la última beta de IE10 con las animaciones y transiciones de CSS3, se esta quedando un poco retrasado con respecto al resto de navegadores)

      Un Saludo!

      Eliminar
  3. Estimado,
    antes que nada los saludo a todos y al autor mis mas sinceras felicitaciones, el video es muy instructivo, ya puse este blog en mis favoritos... jejeje...

    Ahora viene la consulta, hice exactamente lo que dice el video, lo pruebo con mi mozilla v12 y no funciona correctamente.

    Esto es lo que sucede: http://www.aecn.com.ar/prueba

    Haber si me puedes dar una manito y decirme que es lo que funciona mal.
    Muchas gracias!!!
    Diego

    ResponderEliminar
    Respuestas
    1. Muy buenas Diego, gracias por tu comentario.

      He estado echando un vistazo a tu código... te aconsejo unos cuantos cambios:

      - En el HTML el código siempre dentro de la etiqueda body, pon el menú dentro del body.
      - Ya que tienes opciones del menú con varias palabras de texto como "Torneos Anteriores" para que salga todo recto te recomiendo que aumentes el tamaño del botón. li { width:150px)
      - Quítale el tamaño por defecto a la lista ul. ul{borra el width} que coja por defecto el ancho de los botones.
      - El principal problema es que tienes cambiados los nombres de las animaciones, @-moz-keyframes botonsubmenu, por @-moz-keyframes submenu, intercambia los nombres. Donde pone submenu pon boton submenu y viceversa (solo en los @-moz-keyframes).
      - Acuerdate de que la duración es un valor obligatorio en las animaciones, te falta por poner en submenu{-moz-animation-duration:0.8s; }
      -Puesto que has utilizado etiquetas para los enlaces del menú te recomiendo que no dejes su estilo css por defecto, create un estilo para los enlaces.

      Con esos cambios ya te debería funcionar todo perfecto.

      Cualquier problema estaré encantado de ayudarte siempre que pueda. Un Saludo!

      Eliminar
    2. Estimado Antonio,
      no solamente eres un gran experto, sino que tienes la buena voluntad de contestar rápidamente y efectivamente a mi problema, ya quedo todo solucionado, y con las bases que me diste podré realizar grandes menúes profesionales.
      Te estoy muy agradecido por como me has ayudado y divulgaré tu blog a todos de este lado del charco (Argentina).
      Por cierto, me veras seguido por estos lugares.
      MUY BUENA PAGINA.
      Un saludo.
      Diego

      Eliminar
  4. Magnífico tutorial, me ha dejado alucinado.

    Es una lástima que los navegadores no usen el mismo código para las animaciones, pero más raro aún es que valga con poner el prefijo sólo. Es decir, que lo tienen programado, pero ¿no admiten una misma sintaxis? Para matarlos.

    ResponderEliminar
    Respuestas
    1. Gracias por comentar!

      Pues así es, en algún momento todos los navegadores aplicarán el estandard para las animaciones y demás propiedades de CSS3. Pero por el momento tendremos que conformarnos con los prefijos de cada navegador, lo que supone ciertos problemas, ya que tenemos que estar duplicando código, lo que no es nada eficiente. Pero con la rápidez que está avanzando la cosa esperemos que no tarden mucho en ponerse de acuerdo.

      Un Saludo!

      Eliminar
  5. Maestro, muy buen video te felicito.

    Quisiera preguntar y mas que eso, tomarme el atrvimimiento de pedirte que porfavor me origines el codigo para google chrome,
    soy principiante en este tema, mas sin embargo lo intente hacer de mil maneras pero no pude. te agadeceria inmensamente.
    y una vez mas te felicito por ese buen aporte a nosotros los nuevos en este tema (Y).

    ResponderEliminar
    Respuestas
    1. Muy buenas, gracias por tu comentario.

      Si quieres reproducir el código en Google Chrome, simplemente debes cambiar los prefijos de las propiedades que no sean un estandar CSS, el prefijo para Google Chrome es 'webkit'. El resto del código es totalmente el mismo, simplemente cuando yo ponga 'moz' en el video tu debes poner 'webkit'. Por ejemplo, si quiero poner una animacion:
      Mozilla Firefox --> -moz-animation-name: nombreAnimacion;
      Google Chrome --> -webkit-animation-name:nombreAnimacion;

      Simplemente cambia 'webkit' en vez de 'moz' y todo funcionará correctamente en Google Chrome.

      Cualquier problema estoy a tu disposición siempre que pueda. Un Saludo!

      Eliminar
    2. Buenas noches Antonio,

      Antes de nada, enhorabuena por el videotutorial.

      Entrando en materia... cambié los prefijos -moz poe -webkit tal como indicas pero no se me reproducen en Chrome.

      ¿A que puede ser debido? Chrome está actualizado a la última versión.

      Gracias por tu respuesta y de nuevo felicitaciones!!!!

      Eliminar
    3. Muy buenas David, gracias por tu comentario.

      Pues lo único que te puedo decir es que revises tu código, ya que todo tiene que funcionar perfectamente en Google Chrome con las indicaciones que he puesto.

      Si sigue sin funcionar, sube la Web a algún sitio y le hecho un vistazo. Un Saludo!

      Eliminar
  6. Maestro muy bueno sus tutoriales ... no se si pido mucho pero seria posible poder dejar un link o subir el archivo donde este el codigo de cada ejemplo ... Bueno espero no molestar

    ResponderEliminar
    Respuestas
    1. Muy buenas Luis, dispulpa el retraso en contestarte. Lo siento mucho, pero los códigos sólo se los paso a mis alumnos, disculpame por concederles este pequeño priviliegio.

      Si sigues el videotutorial paso a paso puedes ir creando el código sin problemas. Cualquier duda que tengas no dudes en consultarme. Un Saludo!

      Eliminar
  7. hola gracias por el video pero porque utilizas xhtml cuando se utriliza ya html5 por lo demas gracias espero mas videos y otra alternativa muy buena serua sublime text 2 que es un buen editor saludos.

    ResponderEliminar
    Respuestas
    1. Buenas, gracias por tu comentario. No utilizo en este video HTML5, porque no utilizo ninguna carácterística particular de HTML5, es sólo HTML y CSS. Tengo pensado hacer próximamente unos cuantos videotutoriales sobre algunas novedades interesantes de HTML5. Un Saludo!

      Eliminar
  8. Hola a todos... te cuento que el menu es fenomenal.... tengo un inconveniente. no me funciona el menu en el safari de los dispositivos moviles (ipod, iphone, ipad) pero si funciona si lo abro con el chrome en estos equipos

    Que puede ser... la version del navegador es la mas reciente y lo he revisado en muchos de estos dispositivos y el resultado es el mismo... sera que estoy haciendo algo mal?? Les dejo el vinculo donde coloque mi menu para ver si me pueden ayudar a ver donde esta mi error

    Algo adicional.. me da la impresión que algunos simuladores de safari de dispositivos móviles no funcionan bien pues allí algunas paginas funcionan pero en los dispositivos no...

    www.itglobaltech.com.co/menudesplegablecss.html


    gracias por sus aportes

    ResponderEliminar
    Respuestas
    1. Muy buenas John, siento no poder responderte exactamente a esta cuestión, ya que no dispongo de dispositivos Iphone/Ipad, para hacer las pruebas requeridas.

      Por lo que he estado leyendo en la Web, debería funcionar todo correctamente en las últimas versiones de Safari para Ipad/Iphone.

      Si sigues este enlace que te dejo, podrás ver un artículo en el que hacen un ejemplo de animación en CSS, para estos dispositivos, espero que te sea de ayuda:

      http://www.applesfera.com/general/animacion-css-en-safari-mobile-del-iphone-o-ipod-touch

      Un Saludo!

      Eliminar
  9. Muchísimas gracias por este tutorial, me ha resultado muy útil, mas me surgió una duda.
    ¿para qué exactamente se usa en CSS el signo ">" como en #submenu>li? obviamente se nota la diferencia entre poner "#menuHorizontal li:first-child" o "#menuHorizontal>li:first-chil­d", ¿pero como explicarías entonces la función de ese signo ahí?
    Si lo he entendido bien sería algo como que esa propiedad se le asigne al hijo y no al nieto jejeje; ¿estoy cerca?

    Muchas gracias de nuevo.

    ResponderEliminar
    Respuestas
    1. Muy buenas Fredy,

      Lo primero que debes entender es los distintos tipos de selectores en CSS, y en tu caso la diferencia entre el selector de hijos y el selector descendente.

      Te dejo un enlace, en el que viene perfectamente explicado las diferencias entre estos dos selectores, con un ejemplo que vas a entender muy rápido: http://www.librosweb.es/css/capitulo2/selectores_avanzados.html

      Si, estás cerca, pero seguro que así te aclaras más las ideas.

      Cualquier cosa que pueda ayudarte, estaré encantado de atenderte por aquí (siempre que el tiempo me lo permita). Un Saludo!

      Eliminar
  10. Muy buenas Antonio, necesito consejo.

    Estoy intentando seguir tu videotutorial pero llegado un punto, cuándo los submenus deberían aparecer bajo los menús principales, ésto no sucede y ahí me quedo bloqueado. Utilizo Firefox o IE y nada. Gracias por ofrecer tus conocimientos. Un saludo.

    ResponderEliminar
    Respuestas
    1. Muy buenas Ricardo,

      Al no ver tu código no puedo decirte exactamente dónde puede estar el problema. Si sigues el videotutorial al detalle debería funcionar. Ten cuidado con algunas propiedades de CSS3 avanzadas, si usamos prefijos como -moz- sólo van a funcionar en Mozilla Firefox.

      Si no te aparece el submenú puede ser por varios motivos, asegúrate de que estas utilizando bien la propiedad display, que es la que va a mostrar u ocultar el submenú.

      Si estas aprendiendo te recomiendo que empieces por algo más sencillo como mi videotutorial de Menú Desplegable básico que podrás encontrar en la categoría de "HTML/CSS".

      Si sigue sin funcionarte intenta subir la web a algún dominio donde pueda echarle un vistazo.

      Un Saludo.

      Eliminar
  11. Hola, bastante bueno el video, hice un menú utilizando parte de lo que haces en el video y tengo una duda respecto a cuando pasas el cursor y enseguida lo sacas de una lista, la animación queda pegada dependiendo de que tan rápido saque el cursor de encima, necesito saber si tu tienes alguna solución a esto, para devolver la animación desde que se pego hacía atrás o cancelar la animación u alguna otra solución. Un saludo :)

    ResponderEliminar
    Respuestas
    1. Muy buenas Victor, no comprendo muy bien tu pregunta, si te puedes explicar un poco más te lo agradecería , "la animación queda pegada dependiendo de que tan rápido saque el cursos de encima", a qué te refieres con que "queda pegada"?. Tienes tu menú desplegado en alguna Web para que lo revise? y así comprender mejor el problema, si puedes subirla le puedo hechar un vistazo. Un Saludo

      Eliminar
  12. Que tal Antonio, yo te escribi una duda el dia de ayer sobre el menu desplegable, solo que le modifique un par de cosas, pero al momento de hacer mas pequeña la pagina, mi menu cambia totalmente, se descompone todo, como hacer para que se quede estatico cuando hago mas pequeña o grande la pagina. Por cierto tu pagina te quedo bien bonita, ¿y eso blanco son capas?. Saludos

    ResponderEliminar
    Respuestas
    1. Muy buenas Tamandare,

      Si le defines una anchura fija (width) a la capa que engloba el menú o a la propia etiqueta ul, debería mantenerte siempre la estructura de tu menú sin que cambie el diseño aunque la ventana disminuya su tamaño.

      Gracias por tu comentario, ¿A qué te refieres con "eso blanco"?. Un Saludo!

      Eliminar
    2. Hola me referia a las capas, intento hacer una pagina con capas, tengo la duda de como hiciste tu pagina www.antoniohc.com, con css? y como redondeas las esquinas. Yo utilizo css para las capas, le doy width fijo y se descompone al hacer pequeña la pagina y no se como hacerle. Saludos

      Eliminar
    3. Muy buenas Tamandare,

      Para redondear las esquinas de cualquier capa, debes utilizar la propiedad border-radius de CSS. Por ejemplo puedes crear una clase CSS:

      .capaRedondeada{
      border-radius:20px;
      }

      De esta manera aplicarás un redondeado de 20px de radio a todas las esquinas de una capa, también puedes aplicar distinto radio de curvatura a la capa, por ejemplo: border-radius: 20px 10px 15px 0px;

      Supongo que tu problema de que se descompone la página al hacerla más pequeña, es porque estás utilizando capas con posicionamiento flotante no? al hacer la web más pequeña como no hay espacio se desborda y la capa se te coloca debajo, en vez de a la derecha.

      Como ya te dije esto se soluciona creando una capa "padre" que englobe a tus capas con una anchura fija, si tienes la web publicada en alguna url podría echarle un vistazo.

      Un Saludo!

      Eliminar
    4. Muchas gracias por responder, ya me quedo bien, puse el codigo en CSS asi:

      body{
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      }

      #capauno{
      position: absolute;
      top: 70%;
      left: 50%;
      height: 300px;
      width: 660px;
      margin-top: -150px;
      margin-left: -330px;
      }

      Al hacer la pagina mas pequeña, la capa se centra de acuerdo al tamaño de la pagina. Gracias. Salu2.

      Eliminar
    5. Perfecto entonces. Un consejo, utiliza los shorthand de CSS, es decir, agrupa distintas líneas de código en una sola para hacer el código más eficiente y ligero. Por ejemplo, puedes simplificar las propiedades que has puesto al body:
      body{
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      }

      Puedes aplicar estas propiedades en una sola línea:

      body{
      margin:0px 0px 0px 0px;
      }

      Y en este caso aún más, ya que todos los valores son iguales:
      body{
      margin:0;
      }

      Un Saludo!

      Eliminar
  13. Hola otra duda sobre este tutorial.

    Voy a intentar hacer este menú avanzado, pero que pasa si hago más pequeña la página, el menú se desplaza.....

    Saludos

    ResponderEliminar
    Respuestas
    1. Buenas,

      Te recomiendo que uses siemper algún estandar de diseño Web por ejemplo tu web debería al menos 960px de ancho y estar centrada para que se vea perfectamente en todas las resoluciones superiores a 1024.

      Si la capa que engloba tu web tiene una anchura fija (width:960px), y el menú esta centrado en tu barra de navegación (text-align:center), aunque disminuyas el tamaño de la ventana del navegador, el menú siempre se verá correctamente. Un Saludo!

      Eliminar
  14. @-webkit-keyframes submenu{

    }

    porqe me lo acepta google chrme

    ResponderEliminar
  15. @-webkit-keyframes submenu{

    0%{
    text-shadow:200px 2px 20px #375f85;


    }
    50%{
    -webkit-transform:scale(1.3);
    border-radius:5px;
    }

    100%{
    -webkit-transform:scale(1.1);
    text-shadow:2px 2px 1px #375f85;

    }

    }



    porque no me sale error y nose puede ? el ultimo animacion

    ResponderEliminar
    Respuestas
    1. Buenas, con la poca información que me das no puedo ver el error. Tienes el ejemplo desplegado en alguna Web donde pueda ver todo el código?

      No te funciona nada de esa animación? o alguna parte de la misma, como llamas a la animación? recuerda que el nombre de la animación y la duración son valores obligatorios. Si sigues el videotutorial al detalle te debe funcionar perfectamente.

      Si usas el prefijo webkit, supongo que lo estás probando en Google Chrome o Safari no?

      Un Saludo

      Eliminar
  16. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  17. Estimado ! te felicito por la pagina excelente me ha servido "ENE", pero mira tengo una pregunta... como puedo hacer para al momento de seleccionar por ejemplo un submenu, la opcion "futbol" de la pestaña "DEPORTES" y poder dejar seleccionada la pestaña DEPORTE así como por defecto está la de "INICIO" ???

    ResponderEliminar
    Respuestas
    1. Muy buenas Jeremias, gracias por tus felicitaciones.

      Para conseguir lo que pretendes, lo que debes hacer es crear una clase CSS, por ejemplo .botonSeleccionado, con el estilo que quieras, como el que tengo en el botón de inicio.

      Todo depende de cómo hagas el cambio a la sección de "Deportes", lo más normal es que cuando pulsas el botón de "futbol" te redirija a otra página html, por ejemplo futbol.html.

      En esta página futbol.html tendrás el mismo menú, pero deberás quitar la clase del botón de inicio y ponerlo en "Deportes", es decir, en el elemento Deportes tendrás el atributo class="botonSeleccionado", y éste cogerá el estilo de la clase CSS y saldrá resaltado cuando estés en futbol.html.

      Si no haces cambio de páginas, es decir no te rediriges a otra página html, sino que ocultas y muestras capas según el botón pulsado, entonces deberás hacerlo mediante JavaScript.

      Espero que te haya servido de ayuda, cualquier problema no dudes en consultarme, estaré encantado de ayudarte, siempre que el tiempo me lo permita. Un Saludo

      Eliminar
  18. Hola Antonio, tengo una nueva duda.

    Realice este menú tal cual lo explicas y funciona perfecto excepto para el Explorer, en este navegador no se despliega la lista solo se queda centrado así;

    Inicio
    Deportes
    Cultura
    Sociedades
    Economía
    Tecnología

    Y en otra versión del Explorer queda así;
    Inicio Deportes Cultura Sociedades Economía Tecnología

    Como mencionas en un comentario anterior, tendría que intentar con
    -ms - Internet Explorer pero no encuentro la solución

    Gracias

    ResponderEliminar
    Respuestas
    1. Muy buenas Tamandare,

      Para conseguir poner las opciones del menú de forma horizontal, la propiedad de CSS que uitlizamos es:

      display:inline-block

      Esta propiedad permite poner los elementos de la lista, seguidos, uno detrás de otro, hace que se comporten como si fueran elementos de línea (y pone cada opción en sí, en forma de bloque, lo que es perfecto para los menús).

      El problema de esta propiedad es que en navegadores antiguos de Internet Explorer no está aceptada, pero son ya navegadores un poco "obsoletos", de la versión 8 hacia abajo.

      Para solucionarlo, puedes utilizar algún 'hack', para que funcione en navegadores antiguos de IE. Prueba el siguiente estilo, que he encontrado para solucionar el problema en navegadores antiguos:

      li {
      width: 200px;
      min-height: 250px;
      border: 1px solid #000;
      display: -moz-inline-stack; /* FF2*/
      display: inline-block;
      vertical-align: top; /* BASELINE CORRECCIÓN*/
      margin: 5px;
      zoom: 1; /* IE7 (hasLayout)*/
      *display: inline; /* IE */
      _height: 250px; /* IE6 */
      }

      Espero haberte ayudado. Cualquier cosa no dudes en consultar, estaré encantado de ayudarte, siempre que el tiempo me lo permita.

      Un Saludo,
      Antonio Hernández.

      Eliminar
    2. Estoy haciendo una página desde hace un año, ya me tarde un poco jeje pero poco a poco avanzo.
      Me ha ayudado mucho con sus respuestas y con sus videos.

      Te felicito por tu página y muchas gracias.

      Eliminar
  19. Excelente tutorial, pero me queda una duda como le puedo quitar el color azul que tienen por defecto los hipervinculos sin perder los efectos creados?

    ResponderEliminar
    Respuestas
    1. Muy buenas Gonzalo,

      Para ello debes crear una regla de estilo que se aplique a los enlaces del menú. Por ejemplo:

      #idmenu a{
      text-decoration:none;
      color: #fff;
      }

      Esta regla de estilo, se aplicaría a todos los enlaces (elementos ...) que estén incluidos en el elemento con id="idmenu", y le quitaría el subrayado y los pondría de color blanco. Un Saludo!

      Eliminar
  20. una pregunta, como integro el menu que hice como en tus pasos, solo cambian nombres de los submenus y menus, y lo quiero integrar en la pagina web que hize, como le hago?? y le eh buscado por todos lados y nada...

    ResponderEliminar
  21. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  22. hola señor Antonio Hernández.
    Un saludo desde Colombia , antemano agradeciendo el tutorial..
    he seguido sus pasos y he logrado llevar a cabo el menú que
    usted enseño - pero no he podido quitar el color azul que tienen las letras .
    he intentado pagar lo que usted ha indicado a otra persona --
    #idmenu a{
    text-decoration:none;
    color: #fff;
    }
    pero no se me da ningún
    cambio , o por favor indicarme donde lo debo pegar.
    O que debo de hacer para cambiar ese color.

    ResponderEliminar
  23. Estimado:
    Felicitaciones ante todo por su capacidad, profesionalismo y pedagogía para enseñar. Estoy intentando aprender un poco de esto y de un video de Youtube he obtenido un tutorial suyo para hacer un menú. Mi problema es que el submenú nunca aparece. Le copio el código fuente por si Usted puede ayudarme. Gracias!
    ----------------------------------------------------------
    estilo.css
    ul {
    list-style-type:none;
    padding:0;
    text-align:center;
    }
    #menu {
    width:200px;
    }
    #menu > li {
    background-color:#4bcdc8;
    border:1px outset #4bcdc8;
    padding:5px;
    position:relative;
    }
    .submenu {
    position:absolute;
    top:0;
    left:199px;
    display:none;
    }
    .submenu>li{
    background-color:#189a96;
    border:1px outset #189a96;
    width:180px;
    padding:2px;
    }
    #menu li:hover{
    background-color:#086461;
    color:white;
    cursor:pointer;
    }
    #menu li:hover{
    display:block;
    }
    ----------------------------------------------------------
    index.html
    ul id="menu"
    li Home /li
    li ABM /li
    ul class="submenu"
    li Usuarios /li
    li Alumnos /li
    /ul
    li Preceptores /li
    ul class="submenu"
    li Presente /li
    /ul
    li Alumnos /li
    li Biblioteca /li
    /ul

    Nuevamente gracias!
    Flavio.

    ResponderEliminar
  24. Hola Antonio:

    Excelente tutorial, todo me funciono bien pero tengo un problema en Chrome y Oper. Al colocar el prefijp -webkit y -o las animaciones funcionan pero existe un pequeno espacio entre el boton principal y el submenu de modo que al mover el puntero del mouse del boton superior al primer boton del submenu, el submenu desaparece. Ese espacio no aparece en Mozilla. Necesito ayuda para ver como puedo resolverlo. Aqui esta el codigo CSS que he modificado para que funcione en Chrome.

    ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }

    li {
    display: inline-block;
    padding: 5px;
    border: 1px outset #375F85;
    color: white;
    background-color: #375F85;
    width: 100px;
    position: relative;
    margin: -2px;
    cursor: pointer;
    }

    #menuHorizontal {
    text-align: center;
    }

    .submenu {
    position: absolute;
    top: 38px;
    left: 1px;
    display: none;
    box-shadow: 0px 0.5px 5px #000;
    border-radius: 0px 0px 10px 10px;
    -moz-animation-duration: 0.8s;
    -webkit-animation-duration: 0.8s;
    }

    .submenu li:last-child {
    border-radius: 0px 0px 10px 10px;
    }

    .submenu>li {
    display: block;
    -moz-animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    }

    .submenu>li:hover {
    background-color: #C9D7E6;
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    text-shadow: 2px 2px 2px #375F85;
    z-index: 2;
    -moz-animation-name: botonsubmenu;
    -webkit-animation-name: botonsubmenu;
    }

    @-moz-keyframes botonsubmenu {
    0% {
    text-shadow: 200px 2px 20px #375F85;
    }

    50% {
    -moz-transform: scale(1.3);
    border-radius: 5px;
    }

    100% {
    -moz-transform: scale(1.1);
    text-shadow: 2px 2px 1px #375F85;
    }
    }

    @-webkit-keyframes botonsubmenu {
    0% {
    text-shadow: 200px 2px 20px #375F85;
    }

    50% {
    -webkit-transform: scale(1.3);
    border-radius: 5px;
    }

    100% {
    -webkit-transform: scale(1.1);
    text-shadow: 2px 2px 1px #375F85;
    }
    }

    #menuHorizontal li:hover ul {
    display: block;
    -moz-animation-name: submenu;
    -webkit-animation-name: submenu;
    }

    @-moz-keyframes submenu {
    0% {
    opacity: 0;
    left: -150px;
    }
    50% {
    -moz-transform:skew(10deg);
    box-shadow: -10px 4px 8px 5px #000;
    }
    100% {
    opacity: 1;
    left: 1px;
    }
    }

    @-webkit-keyframes submenu {
    0% {
    opacity: 0;
    left: -150px;
    }
    50% {
    -webkit-transform:skew(10deg);
    box-shadow: -10px 4px 8px 5px #000;
    }
    100% {
    opacity: 1;
    left: 1px;
    }
    }


    #menuHorizontal>li {
    -moz-transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    }


    #menuHorizontal>li:hover {
    background-color: #ABC;
    padding-top: 10px;
    box-shadow: 0px 0px 4px #375F85;
    border-radius: 10px 10px 0px 0px;
    border: 1px outset #ABC;
    color: #375F85;
    text-shadow: 1px 1px 1px #375F85;
    }

    #menuHorizontal>li:first-child {
    background-color: #D0DBE6;
    padding-top: 10px;
    box-shadow: 0px 0px 4px #375F85;
    border-radius: 10px 10px 0px 0px;
    border: 1px outset #D0DBE6;
    color: #375F85;
    text-shadow: 1px 1px 1px #375F85;
    }

    ResponderEliminar