He visto muchos menús desplegables por internet.. muy chulos, pero muy complicados para mi gusto, asi que voy a explicar como hacer un menu horizontal desplegable sencillito y funcional, tán solo con html y css.
Lo primero es la estructura, para ella usaré una lista, asi queda todo bien recogidito:
<ul id="menu-horizontal"> <li><a href="#" title="Texto">Texto</a></li> <li><a href="#" title="Texto">Texto</a></li> <li><a href="#" title="Texto">Texto</a> <ul> <li><a href="#" title="Texto">Texto</a></li> <li><a href="#" title="Texto">Texto</a></li> </ul> </li> <li><a href="#" title="Texto">Texto</a></li> <li><a href="#" title="Texto">Texto</a></li> </ul>
La cosa es así: el <ul> es el menú en sí, cada <li> es un botón del menú y el <ul> dentro del <li> es desplegable de ese botón. ¿Me se entiende? xD
Vale, ahora voy a aplicarle un poco de estilo para que quede el menu en horizontal, ya que por defecto las listas son verticales. Se consigue fácil, agregandole a los elementos de la lista el atributo de flotante:
ul#menu-horizontal li {
float: left;
display: inline;
position: relative;
}
Y ahora que es horizontal, voy a ocultar el submenú, ya que no quiero que aparezca aún, solo se tiene que mostrar cuando pase el ratón por encima del botón que tiene submenu. El css en cuestión:
ul#menu-horizontal ul {
display: none;
position: relative;
top: 24;
left:0;
margin:0;
padding:0;
background:#FFFFFF;
}
ul#menu-horizontal ul li {
display: block !important;
}
ul#menu-horizontal li:hover ul{
display: none;
}
ul#menu-horizontal li:hover ul{
display: block;
}
Y.. perfecto! Ya funciona nuestro menu desplegable y horizontal, pero nos queda un paso. Hacerlo bonito. Para ello aplicamos un poco de estilo por aquí..
#menu-horizontal {
width:500px;
margin:0 auto;
}
#menu-horizontal li {
margin:0 1px;
width:98px;
min-height:19px;
text-align:center;
background:#BBB;
list-style:none;
padding:2px 0;
}
/* y otro poquito por aquí.. */
#menu-horizontal li:hover {
background:#C5014F;
}
#menu-horizontal li a {
font:bold 11px Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;
}
#menu-horizontal li ul li{
float:none;
width:98px;
margin:1px 0;
}
Y.. apañao.
No es para decir: Uy que bruto que bonito que está, pero todo es empezar 
Actualizado 29-01-2009: He modificado las propiedades de #menu-horizontal ul para que funcione correctamente en IE7 gracias a los comentarios de José Rico y Ring 
Twittea esto Guardalo en Delicious Compartelo en Facebook
Octubre 3rd, 2008 at 2:10 am
y por que el ejemplo tiene que ser fucsia feo?? si si, “te se” entiende xD
Octubre 3rd, 2008 at 5:21 am
feo dice.. es el color de moda.. tiriririi
Octubre 17th, 2008 at 9:22 am
Hola gracias por el ejm, era justo lo q estaba buscando…. =)
Octubre 20th, 2008 at 12:30 pm
Hola Naty! Me alegra que te sirviese, un saludo y espero volver a leerte ^^.
Octubre 20th, 2008 at 15:42 pm
Esta muy padre tu ejemplo y sobre todo muy sencilo, pero desgraciadamente solo jala en firefox y no en explorer
Octubre 20th, 2008 at 22:46 pm
ui.. ¿no funciona en explorer? a mi me funcionaba perfectamente, esta tarde busco un pc y reviso el código a ver que ha pasado.
Diciembre 16th, 2008 at 7:10 am
Eaaaaaaaaaaaaaaaaaaaaaa felicidades, esta super facil y super editable, gracias e pasado muchas horas buscando algo ais, no cabe duda, ustedes chicas son mas practicas…….ujuuuuuu
felicidades sigue asi y un dia si llegara a comerte el mundo….bueno como en varias vidas…
saludos
Diciembre 17th, 2008 at 11:05 am
Hola Favio! Gracias por tu comentario, me alegra que te sirviera
Saludos!
Enero 7th, 2009 at 4:55 am
hola nataly esta muy bonito pero no se donde pegar los codigos
gracias por el lindo trabajo
Enero 8th, 2009 at 0:08 am
Hola claudia!
un saludo!
Es muy sencillo, el código html (los elementos <ul> y <li>) va en el cuerpo del documento, entre las etiquetas <body> y </body>, y el css puedes ponerlo bien en una hoja aparte (con extension .css) o en la cabecera del documento (el <head>) entre las etiquetas que indican que es css, usease estas:
<style type=”text/css”> aqui va el css </style>
Si no te aclaras dime en que parte te pierdes y te intento explicar mejor
Enero 12th, 2009 at 12:50 pm
Hola nnatali ! Enhorabuena por el trabajo , hace tiempo que estaba buscando algo asi sin necesidad de utilizar JavaScript
Te comento, los selectores de css que utilizas no me funcionan ¿sabes por qué? Que cosa más rara no?
lo dicho gracias y sigue así !
Enero 13th, 2009 at 11:03 am
Hola cssdeña! Gracias a ti x visitar el blog
no te aplica el css a #menu-horizontal?
puede ser por la ruta que le hayas puesto o que le hayas aplicado estilo a los ul en general más adelante, algo así debe ser.. ¿los nombres los tienes correctamente? prueba a cambiar el guion medio x el bajo..
Un saludo!
Enero 14th, 2009 at 2:38 am
Excelente trabajo, sencillo y practico.
Enero 14th, 2009 at 18:45 pm
Gracias velsagroup, me alegro de que te sirviera
Enero 26th, 2009 at 9:41 am
Muchas gracias por el trabajo. Me funciona correctamente en todos los navegadores (Opera, Firefox y Chrome) pero no en IE7. En IE el submenu, me sale desplazado a la izquierda respecto al menu, y al desplazarse sobre las opciones del submenu, este desaparece y no puedes seleccionar ninguna opción ¿Tienes idea que puede ser?
Un saludo.
Enero 26th, 2009 at 19:24 pm
Hola Ring! Pues a voz de pronto no se me ocurre pero si quieres, indica el enlace donde has implementado el menu y te digo a que se debe
Enero 27th, 2009 at 9:43 am
Gracias por tu rápida respuesta.
Desgraciadamante no tengo el menú accesible desde Internet, por lo que no se como hacer para que lo veas. De todas formas gracias por tu interes.
Saludos,
Enero 27th, 2009 at 10:07 am
Ring, no te preocupes, si quieres puedes enviarme lo que tengas hecho a mi email, o en este enlace puedes ver mi ejemplo en funcionamiento, para contrastarlo con el tuyo: Ejemplo de menu desplegable, horizontal y bonito.
Ya verás cómo lo solucionamos, un saludo!
Enero 27th, 2009 at 13:34 pm
nnatali, reitero las gracias y te pido disculpas por todo el trabajo que te estoy dando.
Me ocurre lo mismo con tu ejemplo. Esta tarde te envio por correo, aunque solo sea por curiosidad, una captura de la pantalla para que veas cual es el problema. La pregunta es ¿Que versión de IE estás utilizando tu? ¿Que versión de Windows? Yo estoy usando Windows Vista e Internet Explorer 7.0.6001.18000. Repito, en el resto de exploradores va perfecto.
Un abrazo
Enero 27th, 2009 at 16:23 pm
Hola Ring! No te preocupes, yo encantada de poder ayudar.
Pues no tengo ninguna versión de IE para poder comprobarlo ya que trabajo con Mac Os, pero en estos días me instalaré una maquina virtual con windows y haré unas pruebas con IE a ver xq puede ser.. de todas formas espero tu email, un saludo!!
Enero 28th, 2009 at 17:06 pm
Si que te ha quedao apañao, sí.
Enero 28th, 2009 at 17:16 pm
Bueno, es verdad que no funciona bien en explorer porque por defecto firefox aplica otro margen por defecto al url
Me he estado preguntado porqué has puesto el -40 en el margen y ahí está el error. Para que funcione bien en todos los navegadores hay que colocar el ul sin margin ni padding o, simplemente, no dejar el que traen de casa (ya que este es distinto)
ul#menu-horizontal ul {
display: none;
position:relative;
top: 24;
left:0;
margin:0;
/*margin-left:-40px;*/
padding:0px;
}
Espero que ahora os funcione. Saludos.
Enero 28th, 2009 at 17:49 pm
Hola José Rico!
Muchas gracias por tu solución, no lo puedo probar en IE xo seguro que funciona genial. Solo una cosa.. ¿Por qué pusiste position:relative;? ¿No se vé bien en explorer? Me funciona mejor con position:absolute; ya que así no aparece el desplegable dentro del botón padre (x el fondo de color más que nada).
Por cierto, le he hechado un vistazo a tu blog y me parece muy interesante, ya lo tengo en mis rss, alegra encontrar bloggers alicantinos
un saludo!
Enero 29th, 2009 at 12:31 pm
¡Ahora Si!
Gracias José Rico. Hay que añadirle background:#FFFFFF, para que la unión entre los submenús no sea de color fucsia, y solo queda al final de la última opción del submenú un trocito fucsia que no se quita. Pero por lo demás funciona perfectamente.
Asi es como queda bien en IE7
ul#menu-horizontal ul {
display: none;
position: relative;
top: 24;
left:0;
margin:0;
/*margin-left:-40px;*/
padding:0px;
background:#FFFFFF
}
Un saludo muy grande a todos.
Enero 29th, 2009 at 12:41 pm
Perfecto! Ahora lo actualizo en la entrada.
Muchas gracias a los dos, sois unos máquinas
Febrero 5th, 2009 at 9:29 am
eiiii natalii!! muchisimas gracias!! me ha ido de perlas! :p
Un saludo enorme!!!
Febrero 5th, 2009 at 9:55 am
Xandler me alegro que te sirviera
Gracias a ti por pasarte, saluditos!!
Febrero 8th, 2009 at 15:00 pm
Hola, estoy haciendo el menú para mi página web, pero no consigo hacer que funcione… pongo el mismo menú que pones arriba y no consigo hacer que se ponga en horizontal.. ¿Qué puede fallar?
Gracias.
Febrero 10th, 2009 at 19:18 pm
Hola David!
¿No consigues que funcione el desplegable o sólo que se ponga en horizontal?
Para poner un listado en horizontal lo que hago es añadirle un float a los elementos li
ul li { float: left; }
Eso debería de funcionarte ¿Cómo te aparece a ti? Un saludo!
Febrero 18th, 2009 at 13:30 pm
Hola, me ha venido muy bien el ejemplo, mil gracias. Pero necesito saber como hago un 3º subnivel dentro del subnivel que tienes creado.
Gracias.
Febrero 19th, 2009 at 19:15 pm
Hola Ana!
Puedes añadir un sub-submenu metiendo otro <ul> dentro del <li> del submenú en sí y según te aparezca, juega con el css.
Si no te consigues aclarar avisame y le hecho un vistazo, un saludo!
Febrero 27th, 2009 at 22:46 pm
Hola llevo todo el dia buscando un menu desplegable que no necesite javascript y este me ha gustado mucho por su sencillez pero en firefox va genial pero en el explorer 6 no me va habria que añadir un javascript para que funcione??? un saludo.
Febrero 27th, 2009 at 22:55 pm
Hola david! No hace falta javascript para que funcione en IE6 sólo un poco de dedicación para solucionarlo con css.. xD
Un saludo!
Lo tengo en mi lista de cosas pendientes, espero no tardar mucho en solucionarlo
Febrero 28th, 2009 at 21:12 pm
graciass. es que no me entra en la cabeza que no salga en ie6 sin javascript y en el resto si por el tema de los hover
Marzo 2nd, 2009 at 16:20 pm
el problema esq ie6 es un niño autista.. xD
Marzo 10th, 2009 at 19:52 pm
Hola nnatali, gracias, me ha servido de mucho. Me gustaria que me aclararas si, puedes, ¿cómo puedo hacer que cuando se desplegue el desplegable no se me corran para abajo los demas divs, vamos que se superponga el desplegable a lo que haya abajo.
Yo también soy de Alicante, en concreto de Aspe. Y gracias de nuevo.
Marzo 12th, 2009 at 12:34 pm
Hola Sergio, que alegría encontrarme más alicantinos por aquí!
Sobre tu problema, ¿tienes una dirección para verlo en funcionamiento? sé lo que me dices pero en el ejemplo que tengo no me ocurre así que a primeras no sé decirte por qué es, supongo que será jugar con los position:relative y absolute.. prueba con ello, y si no das mándame el código y le hecho un vistazo
Marzo 12th, 2009 at 16:01 pm
Gracias por responder, lo que he hecho ha sido poner un div que los contenga, y estos dos en absolute y jugar con el z-index. Saludos.
Marzo 12th, 2009 at 16:04 pm
genial, me alegro que lo solucionaras
un saludo!!
Marzo 20th, 2009 at 1:19 am
HOla!!!
Mil gracias , excelente el ejemlo , justo lo q buscaba.
Sigue aportando…. vales mil. Me ayudas un buen justo lo q
este mundo egoista frio y desinteresado necesita.
God bless YOu Soooo Much!!!!!!!!!
Marzo 20th, 2009 at 12:09 pm
Hola LOvelyMoi!
Mil gracias a ti por tu comentario! Me hace mucha ilusión que a la gente le guste / sirva lo que posteo
Un saludo y espero leerte más por aqui!
Marzo 21st, 2009 at 17:50 pm
nnatali me ha impresionado tu manera de hacer diseño web…me gustaria contactarme contigo para charlar sobre el tema…soy de Perú mis correos son agurtoeras@gmail – roervi@hotmail.com
saludos
Marzo 21st, 2009 at 20:59 pm
Hola Faex09!
Claro, me puedes comentar cualquier cosa sobre web, si quieres a través del blog o en mi email.
Saludos desde España!
Marzo 24th, 2009 at 0:38 am
Muchisimas Gracias, me fue muy útil tu ejemplo
Está super sencillo y fácil de entender
Marzo 24th, 2009 at 15:23 pm
Hola Claudia, me alegro de que te fuera útil
Gracias a ti por tu comentario!
Marzo 24th, 2009 at 17:56 pm
Tengo un problema:( no me funciona en ie7 y ya probe todas las opciones anteriores aqui explicadas a ese problema
Marzo 24th, 2009 at 22:19 pm
Hola Claudia! ¿Que no te funciona? En ie7 debería funcionar bien, he mirado un ejemplo que tengo y si que se expande pero aparece desplazado a la izquierda, trasteándolo un poquito se arregla
Marzo 25th, 2009 at 16:48 pm
Muchas gracias nnatali
ya quedó, soy nueva en esto disculpa
Marzo 25th, 2009 at 18:16 pm
No te preocupes, no hay nada que disculpar ^^
Espero leerte de nuevo por aquí, un saludo!
Marzo 31st, 2009 at 10:52 am
Hola, es curioso pero es el unico tutorial que he encontrando que da explicaciones de por qué se hace de ese modo.
He leido los comentarios donde dicen que en internet explorer no funciona, y tienen razon, a mi tampoco men funciona, pero buscando por la red, según he podido leer solo funciona con javascript, aunque no lo tengo muy claro. ¿Tienes idea de como hacer que funcione en IE7?
Por cierto, te agrego a mi feed!
Marzo 31st, 2009 at 12:38 pm
Hola jordi!
¿No te funciona en IE7? Ui pues ahí si que funcionaba, es en IE6 donde no muestra el desplegable.
El problema en IE6 es que sólo reconoce el :hover sobre los links y en el ejemplo los tengo sobre los li, he hecho algunas pruebas con ello esta mañana, incluso usando los comentarios para código solo si es IE6 pero parece que estoy muy dormida aún que no lo he conseguido lograr. A ver si una tarde me pongo en serio y lo saco
Dime si no te funciona en IE7 y lo miramos, vale? Un saludo, y gracias x agregarme! ^^
Abril 13th, 2009 at 16:24 pm
Hola buenas he intentado realizar tu menu horizontal y he tenido problemas con IE7 podrias indicarme o proporcionarme el codigo para que dicho menu horizontal funcione correctamente, como se podria hacer para que se desplegara en formato horizontal?¿?, muchas gracias y un saludo
Abril 13th, 2009 at 19:16 pm
Hola maria anie!
Dime ¿que problema tienes en ie7? ¿No se despliega? El código es el que aparece en el artículo.
Un saludo!
Mayo 8th, 2009 at 15:55 pm
Hola, estoy intentando hacer un menu desplegable como el el que nos pones en el ejemplo, en el blog que se llama nuevawebcomillas, lo unico que he probao con otros menus, pongo el codigo en el html de la plantilla, luego el menu lo añado poniendo un elemento en html /javascritp y me funciona durante un dia, luego no se si es que elo codigo cambia pero ya no sale comomenu desplegable, lo que queria preguntarte sobre tu menu es, ¿donde pongo cada codigo en la plantilla html? ¿y el codigo del menu?
Espero que puedas ayudarme muhas gracias.
Mayo 8th, 2009 at 20:54 pm
Hola Héctor!
El código de aqui arriba debes ponerlo de la siguiente forma:
- La estructura html entre las etiquetas < body> y < /body>
- Los estilos en css en la cabecera de la página, entre las etiquetas < head> y < /head> y a su vez entre las etiquetas que indican que es css, que son estas: < style type="text/css"> y < /style>
Si no te aclaras, avisa y seguimos mirando porque no te funciona
Saludos!!
Mayo 9th, 2009 at 14:49 pm
lo siento pero sigue sin salerme el menu, yo lo quiero poner en un blog de blogger, soy un algo nuevo en estas cosas, y no me sale, necesito saber donde va pegada cada cosa en la plantilla y luego que elementos de pagina tengo que añadir para que salga el menu.
Mayo 10th, 2009 at 23:53 pm
ui eso es otra cosa! yo te hablaba de ponerlo en una web, trasteando el código, pero si dices que es para un blog de blogger ya me quedo un poco corta en cuanto a ideas, pues no sé muy bien cómo trabajar ahí.
¿Puedes editar el código html? ¿Admite plugins?
Mayo 15th, 2009 at 7:51 am
que mal, tu menu esta muy lindo pero,es imposible ponerlo en un blog intente pgando el codigo y no me salio nunca!,
bueno para la proxima… besos
Mayo 19th, 2009 at 11:08 am
Hola uoko! ¿En un blog tipo blogger? ¿O en un blog que has creado tu con wordpress? Tienes acceso al código?
saludos!
No es imposible, si quieres le hechamos un vistazo
Mayo 29th, 2009 at 15:47 pm
Hola, ante todo gracias por el blog, aunque tengo mis dificultades para que se muestre, aqui te envío el código, gracias por la ayuda.
Texto
ul#menu-horizontal li {
float: left;
display: inline;
position: relative;
}
ul#menu-horizontal ul {
display: none;
position: absolute relative;
top: 24;
left:0;
margin-left:-40px;
margin:0;
padding:0;
background:#FFFFFF;
}
ul#menu-horizontal ul li {
display: block !important;
}
ul#menu-horizontal li:hover ul,
ul#menu-horizontal li.iehover ul {
display: none;
}
ul#menu-horizontal li:hover ul,
ul#menu-horizontal li.iehover ul{
display: block;
}
#menu-horizontal {
width:500px;
margin:0 auto;
}
#menu-horizontal li {
margin:0 1px;
width:98px;
min-height:19px;
text-align:center;
background:#BBB;
list-style:none;
padding:2px 0;
}
/* y otro poquito por aquí.. */
#menu-horizontal li:hover {
background:#C5014F;
}
#menu-horizontal li a {
font:bold 11px Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;
}
#menu-horizontal li ul li{
float:none;
width:98px;
margin:1px 0;
}
Texto
Texto
Texto
Texto
Texto
Texto
Texto
Mayo 30th, 2009 at 5:24 am
hola…amigos a ver si pueden ayudar, ya tengo un menu horizontal desplegable, ahora tengo un problema, debe ser con el estilo CCS, la cuestion es que en el mozilla firefox se ve perfecto, pero en el IE.6, todos los se estan poniendo unos debajo del otro…Ufff, ya he probado en darle en el CCS…
display:inline;
pero nada, si alguien sabe porque ocurre esto, please que me escriba, saludos y gracias de antemano…Danis
Mayo 30th, 2009 at 23:48 pm
Hola Nestor! ¿Qué problema tienes para que se muestre? ¿No se muestra en linea o no se despliega?
Un saludo!
Vamos a ver si conseguimos solucionarlo
Mayo 31st, 2009 at 0:00 am
Hola Dani!
Te cuento que el IE6 me trae loca, no he conseguido hacer que funcione el desplegable sólo con css (y dudo que lo consiga ya), aunque tu me cuentas que lo que no puedes hacer es que se vean en horizontal los botones, no?
Para eso tienes que ponerle a los botones (<li>) el float:left, para que floten a la izquierda y no aparezcan uno debajo de otro.
De todas formas, si no puedes solucionarlo y quieres poner el enlace al ejemplo online le hecho un vistazo a ver que le ocurre.
Un saludo y ánimo!!
Junio 1st, 2009 at 16:51 pm
Hola a todos: Parece que tenemos problemas con los menus y al que me incluyo ahora aunque mi problema esta localizado pero no encuentro la forma de solucionarlo. Os pasare el código y os explico el problema de mi menú a ver si me podeis ayudar ademas esto os puede ser util a todos porque solo tiene ese fallo q es visual y lo demas esta perfecto.
El menu que he creado necesitaba que tuviese el mismo tamaño que el submenu por eso le puse en ( ul#navmenu-h a ) esto: width: 104px; como vereis. Si lo probais esta perfecto salvo un pequeño defecto que cuando vais por work –> Websites –> graygs una vez , si volveis a work se visualiza websites (esta OK) pero aparece el 3º submenu donde esta graygs, aparece solo el color del bloque sin las letras y no deberia aparecer hasta que pasas el ratón a websites y no queda muy estetico.
Documento sin título
/* Root = Horizontal, Secondary = Vertical */
ul#navmenu-h {
margin: 0; padding: 0; list-style: none; position: relative;
}
ul#navmenu-h li {
/* en IE float y position lo pone en horiz y no en vertical y ancho */
float: left;
position: relative;
display: inline;
z-index: 1;
}
ul#navmenu-h ul {
width: 119px; /* Tamaño Submenú */
margin-left: 0;
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
visibility: visible;
}
ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: “.”;
height: 0;
visibility: hidden;
}
ul#navmenu-h ul li {
width: 119px; /*160px; width: 98%; display: block; */
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
}
/* Root Menu */
ul#navmenu-h a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background: #8b0000;
color: #ffffff;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
width: 104px; /* si añado esto para = tamaño q submenu aparece el error*/
/*
Ori
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
float: none !important; /*For Opera* /
float: left; /*For IE* /
display: block;
background: #EEE;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE* /
MIO
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
padding: 6px;
float: left;
display: block;
background: #8b0000;
color: #ffffff;
font: bold 11px Arial, sans-serif;
text-decoration: none;
height: 1%;
width: 104px; /*width: 104px; yo*/
}
/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a {
background: #a52a2a;
color: #f5f5cc;
}
/* 2nd Menu */
ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
float: none;
background: #a52a2a;
}
/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,
ul#navmenu-h li:hover li:hover a,
ul#navmenu-h li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover a {
background: #b22222;
}
/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li a {
background: #b22222;
}
/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,
ul#navmenu-h li:hover li:hover li:hover a,
ul#navmenu-h li.iehover li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover a {
background: #D51B1B;
}
/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li.iehover li a {
background: #D51B1B;
}
/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
background: #daa520;
}
ul#navmenu-h ul ul,
ul#navmenu-h ul ul ul {
display: none;
position: absolute;
top: 0;
left: 119px;
}
/* Do Not Move – Must Come Before display:block for Gecko */
ul#navmenu-h li:hover ul ul,
ul#navmenu-h li:hover ul ul ul,
ul#navmenu-h li.iehover ul ul,
ul#navmenu-h li.iehover ul ul ul {
display: none;
}
ul#navmenu-h li:hover ul,
ul#navmenu-h ul li:hover ul,
ul#navmenu-h ul ul li:hover ul,
ul#navmenu-h li.iehover ul,
ul#navmenu-h ul li.iehover ul,
ul#navmenu-h ul ul li.iehover ul {
display: block;
}
navHover = function() {
var lis = document.getElementById(“navmenu-h”).getElementsByTagName(“LI”);
for (var i=0; i
this.className+=” iehover”;
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” iehover\\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(“onload”, navHover);
Junio 4th, 2009 at 2:53 am
hola!
gracias!!
por el ejemplo,,de seguro me servira mucho
( =
Saludos!!
beuna vibra!!
Junio 11th, 2009 at 18:14 pm
hola, estoy haciendo un menu desplegable horizontal, pero en IE6 que es donde lo necesito no se despliega, hay alguna solucion con javascript que me permita desplegarlo sin problema
Junio 11th, 2009 at 21:14 pm
ok, ya resolvi les muestro un codigo para todos los navegadores, bueno no estoy seguro pero para la mayoria, un poko complicado pero funciona ok
——————————-codigo html—————————–
—————————————css—————————–
* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}
body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu { text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border-top-color: #000;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
} /* CSS Document */
Espero que les sirva a todos los que tenemos problemas con el IE6 y menores
Junio 11th, 2009 at 21:19 pm
bueno lamento que el codigo html no salga ya que es vital para la pagina, pero bueno si lo quieren me pueden escrivir adriansc9101@gmail.com
bueno bye
Septiembre 5th, 2009 at 20:48 pm
No consigo hacerlo funcionar.
No sé cuando hay que poner lo de ’style” y eso.
engo un Blog en Blogger, y puedo añadir plugings de HTML/Javascript, por ejemplo, y trastear el código fuente.
Si me pudieses ayudar…
¿Dónde puedo contactar contigo?
Septiembre 8th, 2009 at 2:12 am
HOla, estoy haciendo una pagina, la cual funciona bien sobre firefox pero en ie6 no logro que se vea bien, puse unos iconos y una barra que estan muy arriba.
Septiembre 8th, 2009 at 16:32 pm
CarLiLlooo el css va entre las etiquetas <style type=”text/css”> y </style>. La verdad que no sé muy bien como funcionan las plantillas de Blogger, pero si quieres mandame un email y lo miramos.
Jhon el problema lo tienes con el menú o con otro elemento de tu página? Si tienes un enlace indicalo a si lo miramos online.
Saludos!!
Septiembre 8th, 2009 at 23:18 pm
Buenas de nuevo, nnatali
El problema lo arreglé. Yo ponía esas etiquetas pero para todo.
Te explico: copiaba todos los códigos seguidos, menos el primero que es el plugin, y sólo ponía lo de ’style’ una vez al principio y otra al final.
He ido poniendo eso para cada trocito del código y ya va bien.
Pero tengo un problema. Cuando pongo el ratón encima del menú, se me despliegan los ’submenus’ correspondientes, pero echados un poco a la izquierda. Sé que hay que tocar en los valores de ‘px’, pero no sé cual corresponde al de los ’submenus’.
Y otra pregunta, ¿cómo puedo hacer que quepa todo en un renglón en los ’submenus’? Ejemplo:
Apartado Apartado
Subapartado Subapartado del menu
del menu
Quiero ponerlo como en el segundo caso.
Gracias nnatali
Septiembre 9th, 2009 at 9:54 am
CarLiLlooo pasame el enlace a tu ejemplo y te digo a que elemento exactamente tienes que añadirle más px
Septiembre 9th, 2009 at 10:21 am
http://www.blogmalaguista.blogspot.com
Septiembre 9th, 2009 at 10:32 am
Oki, para modificar el ancho de los li del submenu, así no se te baja de renglón basta con cambiar / añadir el width a este elemento:
ul#menu-horizontal li ul li {
width:120px;
}
Luego sobre lo de que se desplaza para el lado, debes poner el margin:0 y el position:relativa para el elemento ul#menu-horizontal ul:
ul#menu-horizontal ul {
display: none;
position: relative;
top: 24;
left:0;
margin:0;
padding:0;
}
Ya me cuentas!
Septiembre 9th, 2009 at 10:45 am
Perfect !! Ya va perfecto, le voy a cambiar el color de los ’submenus’ y listo.
Muchas gracias nnatali
Daros una vuelta cuando querais por mi blog:
http://www.blogmalaguista.blogspot.com
Septiembre 9th, 2009 at 10:47 am
Genial! Me iré pasando aunque no soy muy futbolera yo.. xD
Septiembre 10th, 2009 at 12:45 pm
Por cierto, nnatali, es que ha ampliado al máximo la plantilla, y automáticamente la plantilla me ha dejado un espacio para el menú.
Yo lo que quiero es que esté como lo tenía antes, que se vea debajo el fondo de las entradas, no el del propio blog.
No sé si me entiendes xd
Septiembre 10th, 2009 at 12:51 pm
te entiendo te entiendo, pues eso es cosa de la plantilla, ponle este estilo a tu archivo .css:
saludos!
#content-wrapper {
background-color:#EEF6FE;
}
ya me dices si se te arregló
Septiembre 10th, 2009 at 13:25 pm
No lo había pensado así…
Estaba intentando meter lo que es el fondo de las entradas debajo del menú. No caí que en vez de hacer eso, podía ponerle el mismo color de fondo al menú.
Lo único que como ya había un trocito del archivo que era,
#content-wrapper {
lo que hice fu añadir lo del color dentro de ese trocito.
Gracias de nuevo nnatali!!
Septiembre 10th, 2009 at 15:56 pm
No hay de qué! Y ya sabes donde estoy por si tienes otra duda
Un saludo!
Septiembre 10th, 2009 at 22:50 pm
Hola nnatali, soy yo, el tío más pesado del mundo jaja
Mira, que es que al ampliar el ancho de la plantilla, se me ha quedado el menú, en medio. Y el problema es que al ampliar las casillas del menú, se me pone en dos renglones.
Creo que es porque está predeterminado para estar en la posición central de la plantilla.
¿Dónde tengo que tocar el código para que pueda ampliar cada una de las casillas y que ocupe el renglón entero?
Septiembre 10th, 2009 at 22:52 pm
Mejor dejalo, lo pongo encima sólo del espacio de las entradas, que no queda tan mal y no debo tocar nada más.
Septiembre 11th, 2009 at 7:55 am
Hola CarLiLlooo no te preocupes, ya le estoy cogiendo cariño al blog y todo jaja
Para que no se vaya a la derecha debes añadir esto:
#menu-horizontal {
padding:0;
}
Ya que el menú te pilla padding-left heredado de otro elemento y por eso te lo desplaza, un saludo!
Septiembre 12th, 2009 at 1:29 am
Mucho codigo y complicaciones inutiles, cuando se puede hacer con una simple tabla y tienes las opciones de imagenes de fondo, adornos, etc.
Octubre 8th, 2009 at 21:20 pm
Saludos mi pregunta es se puede aser el CSS fuera de todo el codigo, ose un archivo aparte nadamas hay que llamarlo
Octubre 9th, 2009 at 11:58 am
Hola Alex68, si, en eso no hay problema simplemente crea un archivo .css con los estilos y luego llámalos desde la cabacera de tu documento .html, saludos!
Octubre 21st, 2009 at 11:22 am
hola, estupendo menú, voy a usarlo, pero tengo una duda. Cómo hago para que el enlace esté en la casilla completa de la en vez de en sólo el texto de la casilla. Porque el fondo cambia cuando pones el cursor en la , pero si no estás sobre el texto no parece que haya enlace y eso puede ser un poco confuso. ¿puedes ayudarme?
un saludo
Octubre 26th, 2009 at 9:34 am
Hola G-or-G!
Pues para hacer eso deberiamos especificar el ancho y alto igual que el color de fondo al elemento a, al enlace, lo malo esq desgraciadamente no todos los navegadores lo interpretan bien..
Noviembre 25th, 2009 at 20:17 pm
Hola,
me va de maravilla el codigo para lo que tenía en mente, pero necesito que los submenus también sean hoizontales y salgan por debajo de la primera linea dew menús. ¿me podeis ayudar? ya no se que mas probar
Noviembre 26th, 2009 at 11:13 am
Para conseguir que los submenus sean horizontales, asignándole un float:left a los >li> que lo forman debería bastar
Un saludo!
Diciembre 22nd, 2009 at 19:06 pm
Hola,
estoy empezando con css y aunque pueda parecer ridicula, mi pregunta es: es lo mismo ul#menu que .menu?? un saludo
Diciembre 22nd, 2009 at 19:21 pm
Hola clicla!
No sería igual, con #menu llamamos a un elemento con id=”menu” y con .menu a un elemento con class=”menu”.
La diferencia de poner una u otra cosa es que las clases se pueden aplicar a varios elementos y los id son únicos.
Espero no haberte liado más xD Saludos!
Febrero 17th, 2010 at 12:13 pm
Hola nnataki, tengo una dudilla, como podrías darle un color diferente al submenú cuando pase el cursor por encima???
Febrero 22nd, 2010 at 18:29 pm
Hola Jose!
Cambia el valor de background aplicado a #menu-horizontal li:hover y listo
Febrero 23rd, 2010 at 1:28 am
Gracias nnatali por la respuesta pero creo que leyendo mi pregunta no la expliqué bien, cuando pasas el cursor por encima de ese menú pongamos que el menú es negro y al pasar el cursor aparece gris, pero cuando se despliega el submenú, en vez de gris quiero que sea amarillo por ejemplo… creo que ahora si que me explico. Gracias nuevamente por la respuesta y por la página, es genial.
Marzo 1st, 2010 at 4:35 am
Hola nnatali!!!
Primeramente queria felicitarte por este hermoso código, la verdad me gustó mucho porque pude hacer lo que quería, algo útil, funcional, senvillo y sin nada de efectos java (ya que de java tengo 0 conocimiento casi jeje)
Segundo noté que en el menú al deslizarse las pestañas (si es que tenes texto o continua tu web) te deslizaba todo para abajo :S (vease en el ejemplo de http://www.blogmalaguista.blogspot.com que posteó nuestro amigo CarLiLlooo) entonces como ello no me complasia me tomé el atrevimiento de modificar un poco el código.
¿Que fué lo que hice para solucionar esto? Simple, agregue un qeu el mismo contenia los menús y luego en el css apliqué esto:
#menu {height:19px; position:relative;}
Luego de esto se me solucionó mi problema. Te agradezco enormemente por este hermoso code nuevamente y a José Rico e Ring también ya que ellos han colaborado (K)
Si desean ver un ejemplo de como quedaría el menú el mismo se encuentra en el panel de usuario de mi web.
http://tonchi.byethost31.com/
Gracias y espero les sea útil de algo mi code.
TE GANASTES UN FAN!!!!!!
Marzo 11th, 2010 at 9:31 am
Hola Jose! Para cambiar solo el fondo del submenu, tienes que aplicarlo a este elemento: #menu-horizontal li ul li:hover.
Hola TonchitoZ muchas gracias por tu comentario y por compartirlo con nosotros!
Saludos!