CSS: Menu horizontal, desplegable y bonito

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.

css menu horizontal

No es para decir: Uy que bruto que bonito que está, pero todo es empezar :P

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 :D

166 pensamientos en “CSS: Menu horizontal, desplegable y bonito

  1. 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

  2. Hola claudia!
    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 :) un saludo!

  3. 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í !

  4. 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!

  5. 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.

  6. 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,

  7. 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

    • 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!!

  8. 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.

  9. 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!

  10. ¡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.

  11. 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.

    • 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!

  12. 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.

    • 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!

  13. 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.

    • Hola david! No hace falta javascript para que funcione en IE6 sólo un poco de dedicación para solucionarlo con css.. xD
      Lo tengo en mi lista de cosas pendientes, espero no tardar mucho en solucionarlo :) Un saludo!

  14. 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.

    • 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 :)

  15. 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.

  16. 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. :P

    God bless YOu Soooo Much!!!!!!!!!

    • 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!

  17. 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! :P

    • 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 :P
      Dime si no te funciona en IE7 y lo miramos, vale? Un saludo, y gracias x agregarme! ^^

  18. 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

  19. 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.

  20. 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!!

  21. 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.

  22. 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?

  23. 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

    • Hola uoko! ¿En un blog tipo blogger? ¿O en un blog que has creado tu con wordpress? Tienes acceso al código?
      No es imposible, si quieres le hechamos un vistazo :) saludos!

  24. 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

    • Hola Nestor! ¿Qué problema tienes para que se muestre? ¿No se muestra en linea o no se despliega?
      Vamos a ver si conseguimos solucionarlo :) Un saludo!

  25. 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

    • 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!! :)

  26. 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 lis[i].onmouseover=function() {
    this.className+=” iehover”;
    }
    lis[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(” iehover\\b”), “”);
    }
    }
    }
    if (window.attachEvent) window.attachEvent(“onload”, navHover);

  27. 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

  28. 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

  29. 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?

  30. 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!!

  31. 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

    • 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!

  32. 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

  33. 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!!

  34. 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?

    • 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!

  35. 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

  36. 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.. :(

  37. 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

    • 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!

  38. 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.

  39. 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!!!!!!

  40. 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!

    • hola naty esta muy buena tu pagina te felicito
      mira yo tengo una pagina pero aun no hago nada
      no se ni por donde empezar me podrias
      ayudar a empezar si quieres te doy la clave
      pero dame tu correo personal para
      enviarte la clave del panel de control y
      entre los dos le hechamos mano te animas?
      sera tu trabajo y el mio amiga.

      mil felicidades por todo tu trabajo
      te felicito una ves mas Bye hablamos.

  41. Muy interesante el menú, felicitaciones… Solo una cosa, también se me despliega todo hacia abajo como dice TonchitoZ pero no puedo solucionarlo, por favor me puedes explicar un poco?

    ;) gracias totales

  42. Buenas noches neologan, perdón por el retraso :S no leí mi casilla de correo estos dias :$

    Bueno, te comento un poco como me las ingenié apra solucionar este error. Para ello cree un para ubicar dentro del mismo el menú, entonces la parte HTML me quedaría así.

    Menú de prueba

    prueba1
    prueba2

    Luego en el CSS hice varios cambios… Así que mejor te dejo el link de mi CSS para que vos puedas analizar lo que cambié ;) a mi me funciona a la perfección. Cualquier cosita acá estoy ;) (Y)

    http://rapidshare.com/files/371016806/style_menu_TonchitoZ.rar.html

    Podés ver el trabajito realizado en esta web, en el panel de usuarios, para corroborar de que si es cierto que me funciona ;) .
    web: http://www.shack.blisse-games.com.ar/

    Gracias a nnatali por crear este hermoso blog :P paso a diario, pero lamentablemente no dejo huellas :( soy de pocas palabras :S

  43. Hola,felicidades muy buen tutorial, nuevamente preguntando como puedo agregar un sub-submenu, ya he insertado el codigo correspondiente, una ul dentro de li del sub menu, pero no le logrado poner el css correspondiente para que se ejecute, unicamente se agrega al submenu, te explico, dentro del menu tengo una etiqueta turismo, el submenu despliega hoteles, restaurantes, museos etc. lo que pretendo hacer es que al pasar el maouse al submenu hotel se me despliegue otro submenu, te agradecere mucho tu atencion a mi duda, de antemano gracias por tu tiempo y conocimientos

  44. Saludos desde USA cress que podrias ayudarme a realizar un sencillo buscador dentro de mi mi website la idea que desde este buscador consigas paginas de articulos o ejercicios.

    Gracias por tu ayuda

  45. buenas noches… probe el menu y funciona muy bien, salvo un detalle… al desplegarse la lista de submenus el resto del contenido de la pagina se mueve… hay alguna manera de solucionarlo??? probe aplicando z-index pero no logro hacer que funcione…

    De antemano gracias por la ayuda…!

  46. Hola, yo tengo el problema de que cuando la ventana se cambia de tamaño las cajas del menú se comienzan a apilar de tal manera que desorganiza todo! alguien sabe como puedo hacer que no se mueva? Grcias por su ayuda!!

  47. Por fin un tutorial entendible >.<
    pero aún así, tengo un problema, no me salen los submenus

    me podrias decir por que?? no se tal vez me equivoque en algo

  48. Nnatali,

    Ante todo decirte que este código me ha encantado. De hecho lo voy a aprovechar para la web que estoy construyendo (bueno intentándolo, que aún ando un poco pez…).

    Me funciona todo OK, pero me gustaría que los submenús me aparecieran horizontalmente debajo del menú principal. He estado ponieno float:left por todos lados pero no doy con la tecla.

    Tu que eres la experta: ¿cómo podría conseguirlo?

    Muchisimas gracias!

    • Después de mucho investigar (método empírico de prueba-fallo) he conseguido tener los submenús en horizontal.

      Como soy novatillo, seguramente habrá maneras de realizarlo más fácil o elegante, por lo que si algún genio se anima que ponga el código.

      Yo aporto el mío.

      /*Pasa menú a horizontal*/
      ul#menu-horizontal li {float:left; display:inline; position:relative}
      /*Ocultar submenús hasta pasar el ratón*/
      ul#menu-horizontal ul {display:none; position:relative; top:4; left:0; margin:0; padding:0; background:#FFFFFF}
      ul#menu-horizontal ul li {float:left; display:inline; position:relative}
      ul#menu-horizontal li:hover ul{display:none}
      ul#menu-horizontal li:hover ul{width:400px; display:inline; float:left}
      /*El número de píxels del width anterior (width:400px) es función del tamaño de los submenús*/
      /* Es decir, contra más submenús horizontales, más alto debe ser el núemro del width o se volverá a ver en vertical*/
      /*Propiedades visuales menú horizontal*/
      #menu-horizontal {float:right; width:633px; 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}
      #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:left; width:98px; margin:1px 0}
      #contenido {background-color:orange; height:400px}

      Se aceptan todo tipo de críticas constructivas!!!

  49. hola chica una preguntica se ve excelente la cuestion pero no se donde colocar el css y el esitlo horizontal no lo entiendo muy bien para ver si me puedes ayudar y gracias disculpa la molestia

    • El CSS se genera creando una hoja de estilos (archivo–>nuevo–>CSS) la cual guardas dentro del directorio de tu sitio en desarrollo dentro de una carpeta llamada “CSS” para que todo quede más ordenado.

      Entre y de tu pagina debes poner el enlace a la hoja CSS, el cual se escribe así:

      a maquetear!!

  50. Natali….que felicidad haber encontrado tu pagina,
    soy de Chile y la verdad es que no conozco a ninguna chica que se dedique a diseño web….caíste del cielo!!

    Intenté enviarte un mensaje a través del formulario de contacto pero no funcionó ya que no reconoce mail.

    Saludos!!

  51. hola a todos esto es lo que estaba buscando…
    PERO: no lo puedo probar en IE por que..???
    no sale, solo en mozilla si me funciona a qui les dejo mi odigo espero y me puedan ayudar ya que me urge terminar con este proyecto… de antemano muchas GRACIAS..!!!
    haci lo agrege dentro de mi html
    <<<>>>>>

    Texto
    Texto
    Texto

    Texto
    Texto

    Texto
    Texto

    <<<<<>>>>>>>

    <<<<<>>>>>>>>><
    ul#menu-horizontal li {
    float: left;
    display: inline;
    position: relative;}

    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;
    }
    #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;
    }

    help..!!!!! :(

  52. HOLA BUENAS TARDES ESPERO ME PUEDAN AYUDAR SOY NUEVO EN ESTO Y PUES TENGO UN PROBLEMA QUIO HACER UN MENU CREO QUE AHI LA LLEVO. PERO COMO HAGO LOS SUB MENUS EN DONDE LOS METO: HE AQUI MI CODIGO

    PAGINA DE MENU DE LINAS

    #menuListHoriz li {
    list-style: none;
    }
    #menuListHoriz li {
    display: block; /* De este modo los elementos del menú se mostrán como bloques uno debajo de otro y hasta el ancho del menú */
    margin: 2px;
    padding: 0;
    list-style: none;
    }
    ##menuListHoriz a, ##menuListHoriz a:focus {

    background-color: #99CCCC;
    border: 3px solid #0000FF;
    margin: 0;
    text-decoration: none;
    color: #000;
    font-family: Verdana,Arial,Helvetica;
    font-size: 13px;
    font-weight:bold;
    display: BLOCK;
    padding: 5px 9px;
    width: 200px;
    padding: 15px;
    }
    #menuListHoriz li a:hover {
    background-color: #003399;
    border-color: #FFF;
    color: #FFCC00;
    }

    MENU DE LINEAS

    LINEA ABOOTT
    LINEA NOVARTIS
    LINEA BECKMAN
    LINEA LINCON
    LINEA SIEMENS
    LINEA J&J
    LINEA ILSIN
    LINEA LABCONCO
    LINEA BOIMERIEUX
    LINEA ROCHE
    Elemento de menú 11

  53. hola amiga estoy toda enrredada con esa explicacion me puedes ayudar quiero colocar un meno desplegable pero no entiendo mucho tengo que ir pasa por pasa asi es que he hechotodo en mi blogs y disculpa por mi inteligencia jejejejeje gracias amiga espero respuesta

  54. Muy bueno, el único problema es que cuando se despliega el submenú se superpone con el div de abajo, en lugar de destacarse el submenú, el div de abajo lo tapa, supongo que debería usar z-index pero no sé cómo aplicarlo en el código, desde ya muchas gracias.

  55. Muchas gracias por el menú, necesito hacerlo para un trabajo escolar y la única forma en que podía hacerlo era con un menú spry en Dreamweaver y no me gustaba como quedaba.

  56. tengo problemas con mi menu, lo hago y todo, pero al ahora de probarlo no puedo seleccionar los submenus, por que si muevo el cursor enseguida desaparecen :S

    por que creen que sea el problema?

  57. hola nnataly oye tengo una duda lo q pasa esq copie tu codigo y me funciono pero cuando lo trate de adaptar a mis necesidades tuve unos problemillas cuando le agrego mas opciones tu manejas 5 yo manejo 7 las 2 restantes se bajan …. y ademas no encuentro como hacer mas anchos los cuadritos de cada opcion porfa responde…

  58. Hola me salió muy bien el submenu, pero a la hora de desplegar los submenus me desplaza hacia abajo el div que le sigue… o sea me mueve el contenido de abajo¡¡ Por favor si alguien me puede orientar, muchísimas gracias¡¡

    • Hola, pregunté anteriormente como evitar que el submenú me desplace hacia abajo mi contenido…y picándole un poco dí con una solución¡
      - Lo que hice fue crear una clase nueva con 2 cosas: 1. position: absolute; y 2. el ancho de mi botón. Entonces se la apliqué al Div padre (que contiene el menu-principal) y de esta manera dejó de desplazarme lo demás hacia abajo, espero sea de utilidad¡ saludos desde México¡¡

  59. Hola @nnatali tengo una pregunta! vamos a decir que tengo tu codigo igualitico! como le hago para que cuando el mouse pasa a de un ITEM4 a un ITEM4.1 el ITEM4 vuelva a tener el mismobackground que los demas. osea ITEM1, ITEM2, … o sea que se vea como deseleccionado?

  60. Muchas gracias por el código estuve buscando varios ejemplos y eran muy complicados o no servían el tuyo es otra cosa, muchísimas gracias por compartirlo y como decimos por mis rumbos te vas a ir al cielo con tenis (^w^)

  61. hola tengo un problema con el codigo me queda perfecto el menu, la onda es que no se ve el submenu, tengo mi y adentro el cuando subo mi a un top:100px; por ejemplo y no a top:256px; que es donde va posicionado en mi no se por que la caja de abajo lo tapa, como hago para que se vea?

  62. Estupendo menú.
    Yo soy más de programar código en C#, javascript y tal y con respecto al diseño aún ando un poco pez.
    Muchísimas gracias.

  63. Buenas, he visto mucho código y creo que todos tenemos o hemos tenido el mismo problema con el CSS. Yo he copiado varios códigos que he visto en está web y ninguno me ha funcionado. No sé si tengo algo mal o que me falta algo, o todos van mal. Necesito un poco de ayuda para encontrar la luz! Si alguien dispone de un código que me sirva de ejemplo que me lo pasa por favor! :)

  64. hola estoy usando wordpress! como haria para pegar el codigo en el cuerpo del documento? como vi que le contestaste a claudia en el mensaje numero 11. Solo tengo archivos php. Desde ya muchas graaacias!!!

  65. tengo un problema el menu horizontal al desplegarce me baja todo el contenido que tengo en el resto de la pagina, (en comentarios anteriores explican la solucion en otros links pero ya caducaron o los cerraron), estaria muy agradecido por su colaboracion feliz dia!!

  66. Buscando en la web llegue a este css-menu-horizontal
    nu-horizontal-desplegableybonito, lo aplique
    que a mi sitio pero con IE muestra el menu
    nu horizontal pero no los desplegables,
    queria saber si hay alguna solucion a esto
    esto, muchas gracias y felicitaciones

  67. Hola!! muchas gracias por el código es justo lo que estaba buscando pero tengo un problema, no me aparece desplegable, me aparecen los campos pero no desplegables y no se como acerlo, tampoco se si e pegado los codigos justo donde tocan, os pego mi codigo haber que he hecho mal y mil gracias!!!

    Quino Lacruz Arquitecto

    body,td,th {
    font-family: “Palatino Linotype”, “Book Antiqua”, Palatino, serif;
    font-size: 14px;
    color: #FFF;
    }
    body {
    background-color: #999;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 24px;
    }
    .QuinoLacruz {
    font-size: 36px;
    text-align: center;
    font-family: “Palatino Linotype”, “Book Antiqua”, Palatino, serif;
    }
    .Arquitecto {
    text-align: center;
    font-size: 24px;
    }
    .Arquitecto {
    font-family: “Palatino Linotype”, “Book Antiqua”, Palatino, serif;
    }
    .Telfmail {
    font-size: 18px;
    }
    .telfmail {text-align: center}
    .Telfmail {
    font-size: 16px;
    }

    </ul
    <ul#menu-horizontal li

    <ul#menu-horizontal ul li
    <ul#menu-horizontal li:hover ul
    <ul#menu-horizontal li:hover ul

    Quino Lacruz Laclaustra
    Arquitecto
     

     
     

    ENTRAR
    quinolacruz@coac.net

    Telf: 977 12 70 41 / 655 93 43 35

    Biografía
    Estudio
    Edificios
    Trayectoria
    Contacto

  68. hola nnatali me gusta tu blog.. me ayudo realizar un vistoso menu lo modifique a mi gusto en cuanto a los colores y los despliegues. pero tengo un problemita para desplegar lo submenus de los submenus aqui esta mi codigo

    Inicio

    Registrar

    Usuario
    Proveedor
    Insumo

    Modificar
    Eliminar
    Consultar
    Generar

    Herramientas

    Reporte

    Acerca de

    Desarrolladores
    Manual

    Salir

    <!–

    ul#menu-horizontal li {
    float: left;
    display: inline;
    position: relative;}

    ul#menu-horizontal li {
    float: left;
    display: inline;
    position: relative;}

    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;
    }

    #menu-horizontal {
    width:500px;
    margin:0 auto;
    }

    #menu-horizontal li {
    margin:0 1px;
    width:98px;
    min-height:19px;
    text-align:center;
    background:#000099;
    list-style:none;
    padding:2px 0;
    }

    /* y otro poquito por aquí.. */

    #menu-horizontal li:hover {
    background:#0066cc;
    }

    ul#menu-horizontal li a {
    font:bold 11px Arial, Helvetica, sans-serif;
    color:#ffffff;
    text-decoration:none;
    }

    ul#menu-horizontal li ul li{
    dislay:none;
    float:left;
    width:98px;
    margin:1px 0;
    }

  69. Pingback: Posma | Pearltrees

  70. Hola muy bueno el codigo pero probandolo me funciona perfactemente en otros navegadores menos en IE9 como podria corregir esto gracias

  71. Hola muy buenas tengo 2 problemas, a ver si me podeis ayudar.
    el primero es que el submenu se desplega pero cuando pongo el cursor encima desaparece.
    y el segundo es que cuando se desplega el submenu hace que el menu coja la anchura de este por lo tanto se mueve.
    gracias
    saludos
    muy buen post!!!!!

  72. Hola a todos, saben que me funciona muy bien el menu, solo queria saber si hay la forma de darle un color diferente a cada menu trate de poner un id=”—” en el a per solo me cambia el color de la palabra, supongo que el id deberia ir en el li pero no se muy bien donde ponerlo….. ayuda por favor

  73. He hecho un menú mas o menos como el tuyo. El problema que tengo es que tengo el cuadro grande y solo me redirecciona a otra página cuando doy a las letras y no cuando doy al rectángulo. ¿ Como se soluciona?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>