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.
muy buenos los tutoriales !!!!
ResponderEliminaruna consulta , como isiste para tener el dreamweaver como con un tema negro??????
Muy buenas,
EliminarGracias! 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!
¿Las animaciones de -moz sirven para el resto de navegadores, o sólo para Firefox?
ResponderEliminar¿O si quieres que lo reproduzcan todos los navegadores tienes que multiplicar el codigo por cada uno de -o -webkit -ms...?
EliminarBuenas,
EliminarCada 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!
Estimado,
ResponderEliminarantes 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
Muy buenas Diego, gracias por tu comentario.
EliminarHe 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!
Estimado Antonio,
Eliminarno 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
Magnífico tutorial, me ha dejado alucinado.
ResponderEliminarEs 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.
Gracias por comentar!
EliminarPues 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!
Maestro, muy buen video te felicito.
ResponderEliminarQuisiera 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).
Muy buenas, gracias por tu comentario.
EliminarSi 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!
Buenas noches Antonio,
EliminarAntes 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!!!!
Muy buenas David, gracias por tu comentario.
EliminarPues 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!
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
ResponderEliminarMuy 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.
EliminarSi sigues el videotutorial paso a paso puedes ir creando el código sin problemas. Cualquier duda que tengas no dudes en consultarme. Un Saludo!
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.
ResponderEliminarBuenas, 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!
EliminarHola 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
ResponderEliminarQue 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
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.
EliminarPor 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!
Muchísimas gracias por este tutorial, me ha resultado muy útil, mas me surgió una duda.
ResponderEliminar¿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-child", ¿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.
Muy buenas Fredy,
EliminarLo 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!
Muy buenas Antonio, necesito consejo.
ResponderEliminarEstoy 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.
Muy buenas Ricardo,
EliminarAl 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.
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 :)
ResponderEliminarMuy 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
EliminarQue 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
ResponderEliminarMuy buenas Tamandare,
EliminarSi 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!
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
EliminarMuy buenas Tamandare,
EliminarPara 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!
Muchas gracias por responder, ya me quedo bien, puse el codigo en CSS asi:
Eliminarbody{
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.
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:
Eliminarbody{
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!
Hola otra duda sobre este tutorial.
ResponderEliminarVoy a intentar hacer este menú avanzado, pero que pasa si hago más pequeña la página, el menú se desplaza.....
Saludos
Buenas,
EliminarTe 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!
@-webkit-keyframes submenu{
ResponderEliminar}
porqe me lo acepta google chrme
@-webkit-keyframes submenu{
ResponderEliminar0%{
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
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?
EliminarNo 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
Este comentario ha sido eliminado por el autor.
ResponderEliminarEstimado ! 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" ???
ResponderEliminarMuy buenas Jeremias, gracias por tus felicitaciones.
EliminarPara 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
Hola Antonio, tengo una nueva duda.
ResponderEliminarRealice 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
Muy buenas Tamandare,
EliminarPara 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.
Estoy haciendo una página desde hace un año, ya me tarde un poco jeje pero poco a poco avanzo.
EliminarMe ha ayudado mucho con sus respuestas y con sus videos.
Te felicito por tu página y muchas gracias.
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?
ResponderEliminarMuy buenas Gonzalo,
EliminarPara 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!
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...
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarhola señor Antonio Hernández.
ResponderEliminarUn 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.
Estimado:
ResponderEliminarFelicitaciones 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.
Hola Antonio:
ResponderEliminarExcelente 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;
}