En este tutorial aprenderemos a hacer un sencillo menú desplegable con soporte para infinitos niveles usando HTML y CSS.
Estructura HTML
Trabajaremos con una lista con clase de «nav», que almacenara los items del menú:
<!DOCTYPE HTML>
<html>
<head>
<title>Menu desplegable usando solo CSS</title>
<link rel="stylesheet" href="estilos.css" />
</head>
<body>
<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="">Servicios</a></li>
<li><a href="">Acerca</a></li>
<li><a href="">Contacto</a></li>
</ul>
</body>
</html>
Los submenús se desplegaran cuando el usuario pase el cursor, estos iran como listas dentro de listas(ul > li > ul). Este ejemplo funcionara con cualquier cantidad de submenús, eso quiere decir que puedes incluir los niveles de menús que quieras, en este caso tendremos 3 niveles:
<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="">Servicios</a>
<ul>
<li><a href="">Diseno grafico</a></li>
<li><a href="">Diseno web</a>
<ul>
<li><a href="">Submenu 1</a></li>
<li><a href="">Submenu 2</a></li>
<li><a href="">Submenu 3</a></li>
<li><a href="">Submenu 4</a></li>
<li><a href="">Submenu 5</a></li>
</ul>
</li>
<li><a href="">Marketing</a>
<ul>
<li><a href="">Submenu 1</a></li>
<li><a href="">Submenu 2</a></li>
<li><a href="">Submenu 3</a>
<ul>
<li><a href="">Submenu 1</a></li>
<li><a href="">Submenu 2</a></li>
<li><a href="">Submenu 3</a></li>
<li><a href="">Submenu 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">SEO</a></li>
</ul>
</li>
<li><a href="">Acerca</a>
<ul>
<li><a href="">Historia</a></li>
<li><a href="">Mision</a></li>
<li><a href="">Vision</a></li>
</ul>
</li>
<li><a href="">Contacto</a></li>
</ul>
Código CSS
Empezaremos con un reset basico y algo de decoración para el menu:
* {
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
.nav > li {
float:left;
}
.nav li a {
background:#0c9ba0;
color:#FFF;
display:block;
border:1px solid;
padding:10px 12px;
}
.nav li a:hover {
background:#0fbfc6;
}
En la linea 9, se especifica que solo los li que sean descendientes directos del primer ul tengan float: left, esto es para que solo el menu principal sea horizontal y los submenús se mantengan en vertical:
Por defecto todos los submenús no serán visibles, los ocultaremos usando display: none.
.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
Todos los submenús tendrán un ancho minimo de 140px para que no se vean desiguales y llevaran position: absolute para que no afecten el ancho del menu principal.
Proseguimos con la parte que hara que se muestre el submenu oculto:
.nav li:hover > ul {
display:block;
}
En este código le estamos indicando que cuando el cursor pase sobre cualquier li su descendiente ul se muestre(display: block).
El problema ahora es que los submenús de segundo nivel en adelante se están mostrando pero no como deberían:
Lo que tenemos que hacer es que estos se muestren a la derecha de su respectivo ancestro li:
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-140px;
top:0;
}
Los submenús de segundo nivel tendran right: -140px, para empujarlos hacia la derecha, es importante notar que este valor es el mismo que el que definimos anteriormente como ancho mínimo, y ademas tendra top: 0 esto es para que se posicione al mismo nivel que su ancestro li que tiene position: relative.
Esto afectara todos los submenús de segundo nivel en adelante:
Añadir un indicador a los elementos con submenu
Investigando por internet encontre la forma de anadir un indicador a los elementos que contengan submenus sin hacer uso de JS y aqui lo comparto:
Lo primero es añadir el elemento que hará de indicador al lado de cada enlace del menu, en este caso estamos usando una flechita (si prefieres usar una imagen tambien funcionara) su código HTML es ▼:
<ul class="nav">
<li>
<a href="#">Home<span class="flecha">▼</span></a>
</li>
<li>
<a href="#">Servicios<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Diseno grafico<span class="flecha">▼</span></a></li>
<li>
<a href="#">Diseno web<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Submenu 1<span class="flecha">▼</span></a></li>
<li><a href="#">Submenu 2<span class="flecha">▼</span></a></li>
<li><a href="#">Submenu 3<span class="flecha">▼</span></a></li>
<li><a href="#">Submenu 4<span class="flecha">▼</span></a></li>
<li><a href="#">Submenu 5<span class="flecha">▼</span></a></li>
</ul>
</li>
<li>
<a href="#">Marketing<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Submenu 1<span class="flecha">▼</span></a></li>
<li><a href="#">Submenu 2<span class="flecha">▼</span></a></li>
<li>
<a href="#">Submenu 3<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Submenu 1<span class="flecha">▼</span></a></li>
<li><a href="#">Submenu 2<span class="flecha">▼</span></a></li>
<li><a href="#">Submenu 3<span class="flecha">▼</span></a></li>
<li><a href="#">Submenu 4<span class="flecha">▼</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">SEO<span class="flecha">▼</span></a></li>
</ul>
</li>
<li>
<a href="#">Acerca<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Historia<span class="flecha">▼</span></a></li>
<li><a href="#">Mision<span class="flecha">▼</span></a></li>
<li><a href="#">Vision<span class="flecha">▼</span></a></li>
</ul>
</li>
<li>
<a href="#">Contacto<span class="flecha">▼</span></a>
</li>
</ul>
Ahora lo que haremos sera definir que por defecto esta flecha este oculta en todos los elementos del menu:
.nav li .flecha{
font-size: 9px;
padding-left: 6px;
display: none;
}
Tambien le reduci el tamano de la fuente y lo aleje un poco del texto para que se vea bien.
La parte esencial de esto es la siguiente: vamos a usar la psuedo-clase CSS3 :not en combinación con :last-child para excluir a todos los elementos del menu que no contengan submenus (todos los <a> que no sean :last-child) y solo afectar a los span.flecha de los que si:
.nav li a:not(:last-child) .flecha {
display: inline;
}
El resultado:
Pueden leer mas acerca de este selector en este enlace, lamentablemente solo es soportado por los ultimos navegadores (incluyendo IE9).
Conclusión
Cabe notar que este ejemplo tiene ciertas limitaciones como la relantizar la desaparición del submenu cuando el cursor deja el elemento, sin embargo es una buena alternativa para cuando necesitamos crear un menu desplegable lo mas rapido posible.
Hola Josue
Da error el link de descarga…..! de todas maneras está bueno el tuto!!!!!
Saludos
Hola Amadeo, gracias por la observación, ya lo arregle 🙂
Hola, como puedo ponerlo en la mitad de la página?
Excelente, muy claro, gracias
Buen tuto Gracias ! 😀
Llegué para quedarme, por medio de T!, encantado de la usabilidad del sitio, muy productivo, voy a hondar mucho mas sobre los tutoriales, los veo muy completos y dinámicos 😉
Saludos!
Sencillamente genial.
Necesito hacer un menú horizontal con soporte para submenú que funcione correctamente en Internet Explorer 8, Firefox 9.0.1 y Google Chrome. Por favor ayuda
Hola Liana, utiliza este plugin de jQuery http://users.tpg.com.au/j_birch/plugins/superfish/, espero te sirva.
oye muy bueno solo que le falto un poco mas de comentarios pero es muy funcional
Este menu lo estey poniendo en un pagina que tiene dos (marco)freme un de alto de 30 y el otro de alto 70 porciento,
en el de 30 estoy poniendo el menu y en el 70 pociento para que se ejecuten las paginas de las opciones del menu.
Pero el meno que esta en el (marco)frame de 30 de alto esta el menu pero este no se muestran todos los submenu.
Claro que podría aumentar el alto del marco(frame) del menu pero esto quedaría totalmente separado del otro marco(frame) y quedaría feo.
Quiero ayuda para arreglar esta dificultad gracias.
No te entiendo muy bien, pasame tu pagina para verla mejor, de todos modos no te recomiendo usar iframes para estructurar una pagina.
Muy bueno el tuto,Muchisimas gracias por compartir su conocimiento.
¡ Saludos !
Hola Buen ejemplo sencillo como puedo hacer para centrarlo.
Puedes ponerlo dentro de un
margin: 0 auto;.Lo maximo.
Estare viendo el resto de ejemplos
Tengo un problema con un menu css, justo abajo de este menu tengo una imagen jquery tipo slider y no me puestra el menu sobre este jquery, como lo puedo solucionar. De igual forma probare con este menu haber si me resulta.
Te agradecere una respuesta, un abrazo desde Chile.
Se que problema tienes, eso lo puedes arreglar jugando un poco con el z-index del slider y del menu, echale un ojo a este tutorial https://tursos.com/tutoriales/html-css/css-basico-position-z-index
Josue, por favor Ayuda. Mi problema está relacionado con este mismo. Las opciones del sub-menú se esconden por debajo de unas imágenes mostradas con el nivo-slider. Leí tu tutorial de position-z-index pero no se como aplicarlo al menú para que quede por encima de las imágenes-
Te agradezco de antemano la ayuda
muchas gracias. Lo logre incluyendo el position y el z-index en estas lines
.nav > li {
float:left;
position:absolute;
z-index:1;
}
Saludos
Justo eso te iba a responder, gracias por ponerlo, espero a alguien le sirva.
Yo estoy intentando meter el menu en una tabla, pero lo que consigo es que me la mueva entera hacia la izquierda, aqui se puede ver un ejemplo:
http://www.musicagratis.eu/jazz/vocaljazz.html
Estos son los pasos que he realizado, a ver si detectais donde esta el fallo:
1- Subo a la carpeta «jazz» la carpeta _MACOSX y el fichero «estilos.css»
2- Pego el codigo del menu en una tabla
3- Subo la pagina vocaljazz.html a hosting y me encuentro toda la tabla a la izquierda
¿Sabeis como puedo solucionar esto?
Gracias de antemano y felicidades por el blog
No se mucho de tablas, tal vez si le pones esto:
Ok. Josue, vere lo que me recomiendas y te aviso como me va. Gracias por tu respuesta, un abrazo.
Muy bueno el tutorial pero de hace tiempo vengo buscando como hacer para que el menu aparezca en todas las paginas sin tener que copiar y pegar en cada pagina. Alguien me podria ayudar?
Vi por alli que usan include() de php pero quisiera saber si hay alguna forma de hacerlo solo con html o javascript
En HTML tienes 2 opciones, usar iframe o usar algo como , es mas seguro que el iframe funcione
Me resulto con lo que me dijiste Josue, igual tengo el problema que cuando carga se va la imagen y luego vuelve. Esto siempre pasa cuando va cambiando de imagen.
Gracias.
No entiendo, pasame tu pagina para verla y poder identificar el problema.
Excelente tutorial, he leído miles de páginas con tutoriales y tengo que decir que esta para mí es la mejor, al menos lo que he visto en este tutorial. Esto de que se explique todo, todito, es excelente.
Un 10, Josue. Seguiré más a menudo tus post.
Hola josue, he leido el tutorial y lo he probado y funciona bien, solo hay una cosa que dices y no esta bien. Explicas que este menú funcioan en internet explorer desde la version7 en adelante, lo he probado en internet explorer y no va bien. Cuando haces clic al menú y deseas ver el submenú automáticamente se cierra el submenú, no te deja ni hacer clic ni nada, ¿que puede estas pasando?
Un saludo
Lo he probado en IE7+ y me funciono bien.
Hola josue, he leido el tutorial y lo he probado y funciona bien, solo hay una cosa que dices y no esta bien. Explicas que este menú funcioan en internet explorer desde la version7 en adelante, lo he probado en internet explorer 7 y no va bien. Cuando haces clic al menú y deseas ver el submenú automáticamente se cierra el submenú, no te deja ni hacer clic ni nada, ¿que puede estas pasando?
Un saludo
Hola!
a ver si me podeis ayudar. Necesito hacer que sólo se despliegue el submenu al hacer click. No quiero usar javascript, existe algún comando con css ??
Puede que sea muy difícil, pero si al abrir un submenu se cerrase el anterior que abriste sería perfecto. El menu que estoy intentando hacer es vertical y tiene 4 niveles de submenus.
Gracias.
1 saludo.
Intenta hacerlo con jQuery:
$(«.menu li a»).click(function(){
}):
Muy buen tuto, me encanta esta página.
Para el problema de centrado yo sólo e conseguido meterlo en un div, ajustar el div a los px del menu y centrar el div, dejando un espacio por debajo para un marquee que tengo.
HTML:
...
CSS:
#menu {
font-weight: bold;
BACKGROUND-COLOR: #000000;
width: 702px;
height: 30px;
margin: 0px auto 10px auto ;
}
Un saludo.
Hola amigo:
estoy empezando en esto y lo que quiero es que no se utilice * para valores globales.
Lo que quiero poner es el » ul class» dentro de un div para poderlo manipular pero se desconfigura todo. Me podrias ayudar
Solo se usa una vez al principio para estilizar las fuentes, si gustas sacalo, no afecta en nada al ejemplo.
Hola Josue
Tengo N archivos html y un css. El menu esta en el css, pero el contenido del menu obviamente esta en cada uno de los archivos html. Bueno la pregunta es: Si deseo modificar el menú, como puedo hacerlo una sola vez y no como ahora en cada uno de los archivos html.
Gracias por tu ayuda
Con PHP, creas un archivo menu.php y luego con include() lo insertas en tus paginas, asi solo modificas 1 archivo.
Tengo un problemilla con el menu, en IE me sale como vertical en vez de horizontal y los submenus no aparecen, a que puede ser debido?
la página es la siguiente: http://www.motoclublavirgendelcamino.info/pruebas
En Chrome y en firefox funciona perfectamente, sólo es en IE
Un saludo
Creo que el fallo puede estar aquí pero no se donde, te pongo el css del div, lo tuve que centrar de forma extraña ya que no tuve mas remedio
#menu {
font-weight: bold;
BACKGROUND-COLOR: #000000;
width: 702px;
height: 30px;
margin: 0px auto 10px auto;
}
Un saludo
he cambiado el #menu para centrarlo de diferente manera de la cual no se si dará problemas en otras resoluciones pero creo que no, pero en IE sigue sin verme bien y lo único que tengo cambiado de tu CSS y codigo son enlaces y colores no se donde puede estar el fallo…
#menu {BACKGROUND-COLOR: #000000;
height: 25px;
position: relative;
padding: 0px 15% 30px 15%;
font-weight: bold;
}
En que version de IE lo estas probando? me gustaria ayudarte pero el problema es que estoy en mac y aqui no hay IE.
Pues uso el IE 8, lo he conseguido hacer que se vea bien, pero no me deja selecionar los submenus, me desaparecen antes, a lo mismo que tengo problemas con el centrado que lo tengo echo en margin y en un portatil se ve mal 😀
Hola Josue
Te saludo desde Ecuador. He visualizado el trabajo, se ve muy bien. La pregunta del millón es: Hay alguna forma de que los menus en html, no vayan en cada página?. En mi caso, por ejemplo tengo un sitio web (www.patriciobonilla.com), con más de 30 archivos-páginas en html, cuando deseo hacer algún cambio en el menú, debo cambiar en todos estos archivos…
Saludos y felicitaciones por tu aporte
Con PHP, utilizando include
Hola Josue, estoy implementando el menú desplegable con y css pero no funciona correctamente en IE, actualicé a la versión 9, pero tampoco. Cada menú se ve de manera horizontal como renglones.
Otra consulta, usé el include pero el menú está en un doc. html y el que lo llama es un arch. Php, está correcto así? Muchas gracias por tu ayuda.
Tendrias que modificar el archivo, ya no seria .html sino .php para que la funciona include funcione.
Hola Josue, finalmente pude hacer un menú modificando el que aparece en el sig. link
http://elblogdefiko.blogspot.com.ar/2011/12/crear-menu-horizontal-desplegable.html.
Funciona en IExplorer, en Firefox y Chrome. Muchas gracias!
Excelente tuto.
He leido mil y ninguno tan claro como este.
Realmente muy bueno
¿consulta si en vez de tener botones horizontales quiere tener todos verticales y que al pasar por uno de ellos se muestren los sub-menu pero desplazando hacia abajo lo elementos del menu como lo hago?
Checa http://tinkerbin.com/dHT5nbw8
Hola, mi pregunta es la siguiente.
Me gustaría tener un menú más destacado como el tuyo. Logré hacerlo del tamaño de alto de mi header pero desde luego los submenus quedan con el mismo padding por más que les ponga un valor. Esto hace que cuando aparezca la lista sea extremadamente grande y toque hacer scroll a la página. ¿Hay alguna forma con este código hacer algo parecido al submenú de esta página que sale un bloque pequeño con las diferentes opciones y un sencillo background hover al pasar el cursor?
Gracias por la respuesta.
Mmm no te entiendo del todo, sobre el menu del sitio, he usado este plugin para hacerlo, lo podria haber hecho con este ejemplo pero necesitaba que se muestre un indicador.
hola es la primera vez que los encuentro y esta muy interesante, me gustaria sabes como puedo hacer ese mismo desplegable , pero enves de que las opciones bajen , suben osea que sea acendente …
ojala me pueden ayudar saludos desde Mexico ….
Modificando el CSS del menu hijo, especificamente la propiedad top, pero ten en cuenta que necesitas darle algo de espacio arriba para que se vea bien.
hola, como hago para crear un submenu en dos columnas, porque se ve terrible por que son muchas opciones.
Tal vez tendrias que hacer un div que contenga dos o mas uls como submenus y estos colapsarlos para que se vean como columnas.
Gracias por el tutorial, pero como agregarle el indicador al lado para que muestre el desplegable, es decir la flechita
Hola Manuel, mira encontre este tutorial, esta en ingles pero te lo explico aca:
Lo que hace es añadir un indicador en todos los a del menu <span class=»more»> y lo oculta por defecto, pero luego anade otra regla CSS que es:
li a:not(:last-child) .more { display: inline; }
Esta diciendo entonces que lo muestre (el indicador) en todos los li que tengan elementos hijos (submenus).
Lo acabo de implementar en este tinkerbin, funciona perfectamente con el menu de este tutorial.
Muchisimas gracias por el tutorial y el dato, aunque me costo ubicarlo dentro de la plantilla que tengo, fue exitoso al final ver como quedo. Ahora quiero practicarlo para poderlo hacer desde cero y que quede como yo quiero. Nuevamente gracias y hasta pronto por ahi cuando tenga otra duda. Excelente informacion.
Que tal amigo, me surge un problema, ya tengo el menu, cuando paso el mouse sobre el enlace que abre el sub-menu, funciona perfecto, pero cuando muevo el mouse para seleccionar un enlace en el SUB-MENU este se cierra bien rapido, no se que elemento tengo que modificar para que el submenu permanezca abierto para poder seleccionar enlaces en el.
Solo con CSS no creo que se puede añadir un delay, tendrias que usar Javascript.
muchas gracias eh utilizado muchos de tus ejemplos son muy buenos. Ojala siempre sigas así.
saludos desde chile.
Gracias a ti, un saludo.
Que significa (nav), pregunto xq soy nuevo y he visualisado que se encuentra en varios tutoriales.
es una clase pero que papel juega?
nav = navegacion
perdon, como hacer q el menu q se desplegue No quede por encima de la la informacion.Me equivoque en mi otro mensaje.te dejo el link a la pagina q subi la foto de mi problema. gracias de nuevo.
http://tinypic.com/r/2vv857d/6
z-index, https://tursos.com/tutoriales/html-css/css-basico-position-z-index
hey bro muchisisisisismas gracias me ha servido de mucho ya que no te entendia a mi profe como se creaba un menu pero tu lo explicas muuuy facil gracias 🙂
Gracias por comentar, un saludo 🙂
Hola hace poco hice la última actualización de wordpress y varias cosas dejaron de funcionar, principalmente el menú, el submenú del tercer nivel estan sobre los de segundo nivel y no se puede acceder a ellos existe alguna solución, o que me recomiendas? ayuda 🙁
Tu sitio es este? el menu lo veo bien.
Que tal, en primera muchas gracias por el tuto esta genial!, quería saber como puedo hacer que dependiendo de un usuario que ingrese y vea el menú solo pueda ver cieras partes del menú, por ejemplo para este caso que el usuario A solo pueda ver la parte de Servicios — Diseño Web y que el usuario B solo pueda ver de la parte igual de Servicios pero — Diseño Gráfico; estos usuarios ya estan previamente autentificados asi que por eso no hay problema, ojala me puedas dar aunque sea una idea de como hacerlo si es posible con CSS.
Si es PHP, seria algo como:
En ese caso Servicios solo se mostraria si la condicion pasa.
Gracias por el tutorial, simple e instructivo.
En internet explorer no funciona correctamente los menú desplegable me sale mal pero en los demás exploradores funciona correctamente cual podría ser mi erro
que version de IE?
Hola Josue
A mi no me funciona en IE tampoco, i version es la 9
El link es:http://www.domesstico.com/index.php
Hola Josue, fantastico tutorial, muy bien esplicado.Tengo una duda y es si los submenus podrian ir en posición horizontal. En caso afirmativo podrás indicarme como hacerlo, muchisimas gracias.
Quitale el float: left, y ponle display: block a los li.
Gracias por tu respuesta, no consigo el resultado deseado. Quito el float:left a «.nav>li» y añado «display:block» en todos los li y no resulta. Creo que algo no hago bien. Ahora estoy aprendiendo css….
SI pudieras indicarme exactamente cuales son los li que tengo que añadir «display:block».
Fantasticos tutoriales!!!
Josue,
No se si estoy haciendo algo mal pero trate de bajar el codigo fuente y recibi un archivo cifrado, ahi alguna otra forma de bajarlo?
Gracias
Miguel
A mi me deja bajarlo correctamente (menu-multinivel.zip)
Hola muchas gracias me sirvio mucho!
oye como ago para que el menu se desplique por encima de una imagen 😀
Hola, una pregunta, estoy modificando el mañano de los botones ya que en algunos el texto es mas grande que en otros pero no logo poder editar el tamaño de los sub sub menus ya que estos heredan el tamaño del submenu y necesito poder modificarlos, sabes como lo podria solucionar???
Saludos
Prueba usar el selector de hijo directo de CSS ( > ), para aplicar estilos especificos:
ul > li (submenu)
ul > li > li (sub submenu)
por fin una pagina que si responde a las preguntas de la gente muchisimas gracias me volvi loco para esto muchas gracias y voy a leer sus otros post que estan mas que interesantes y me registro ya gracias amigo
a otra cosa que me olvide de preguntarte si quiero cambiar algunos nombres y poner otros hay que modificar el css
Asi es.
Es posible que los items superiores esten centrados y los demas no ? muchas gracias 🙂
.nav > li a { text-align: center; }
.nav > li > ul > li a { text-align: left; }
Hola a tod@s
Tengo un menú similar al del ejemplo pero vertical. El problema es explorer y la verdad es que no termino de aclararme por más q leo cosas en la web. El menú me aparece desplegable la primera opción y el resto nada.
Agradezco la ayuda que me puedan dar al respecto, una luz sobre que hacer.
Este el código:
#menuvertical {
text-align: left;
width:180px;
position: absolute;
top:190px;
left: 3px;
position: relative\9;
top:175px\9;
/*opacity: .9;*/
z-index: 99;
border: 2px solid #ffc82b;
list-style-type: none\9;
}
#menuvertical ul {
list-style-type: none;
padding:0;
}
#menuvertical ul li.nivel1 {
width: 180px; /* Ancho de las pestañas */
}
#menuvertical ul li.primera { /*Líneas división celdas*/
border-top-width: thin;
border-top-style: solid;
border-top-color: #e0d9aa;
}
#menuvertical ul li {
padding:0;
background-image: url(../images/flecha_categoria.png);
background-repeat: no-repeat;
background-position: right center;
/*display: block;
width: 40%;
float: left;*/
}
#menuvertical ul li a {
display: block;
text-decoration: none;
color: #9c503b; /* Color del texto */
background-color: #fff3d6; /* Color de fondo */
border: solid 0px #fee; /* Borde de las pestañas */
border-top: none;
padding: 10px; /*Ancho celda*/
position: relative;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bolder;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
background-color: #FFF; /* Color de fondo al pasar el mouse */
color: #000;
position: relative;
list-style-type: none;
border: 1px solid #d6d6e6;
}
#menuvertical ul li a.nivel1 {
display: block !important;
display: none;
position: relative;
}
#menuvertical ul li ul {
display: none;
border: 1px solid #d6d6e6;
}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 179px;
top: -1px;
position: absolute\9;
left: 179px\9;
top: -1px\9;
/*border: 1px solid #d6d6e6;*/
}
#menuvertical ul li ul li a { /*COLOR AZULLLLLLLLLLLLLLLL*/
background-color: #FFF; /* Color de fondo subpestañas */
color: #103856; /* Color del texto subpestañas */
width: 300px;
border: 0px solid #ffc82b;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#menuvertical ul li ul li a:hover {
position: relative;
/*background-color: #6E6E6E;*/ /* Color de fondo al pasar el mouse subpestañas */
color: #ff7800; /* Color del texto al pasar el mouse subpestañas */
border-top-style: none; /*Para q no halla bordes sobre el submenú al hacer hover sobre el menu de nivel 1*/
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
hola mu bien tus aporte necesito que ayude con un sistema q estoy realizandon como hago para trabajar con la isma pantalla pero con deferente submenu ayudame
No te entendi.
Muchas gracias por el fantástico trabajo que estás haciendo con estos tutoriales. A mí me están apoyando mucho en mi trabajo.
Sigue así.
Cómo puedo hacerlo para que el submenu que se despliega me quede por encima del contenedor principal? Es que así me queda por debajo de este div.
Me resultó muy útil este ejemplo!!
Espero respuesta. Gracias
z-index, aplica z-index al menu y al div, en el valor le pones uno superior al del menu y uno inferior al del div, para que z-index funcione ademas ambos elementos tienen que tener position: absolute/relative/fixed definida, en tu caso creo que lo mejor seria dejarlo con relative para que no afecte su posicion.
Muy bueno el ejemplo me ha sido de mucha utilidad
Gran explicación.
Una pregutna, ¿cómo se hace para que el color de los botones del submenú sea distinto del de el menú principal?
ul > li, el «>» representa descendencia directa de esta forma solo estas apuntando a los de primer nivel.
Aqui lo teneis funcionando con algunos cambios: http://www.fivetechsoft.net/cgi-bin/fiveform
El problema que tienes es que el menu sale atras del div? aplica las siguientes propiedades al menu:
#omenu{
z-index: 2000;
position: relative;
}
Hola que tal… disculpa pero…al pasar el mouse sobre el menú muestra el submenú, pero al pasar el mouse a alguna opción desaparece rápidamente ¿qué puedo hacer para que esto se evite? Agradecería tu pronta respuesta.
Hasta donde se, no es posible hacerlo con un menu hecho solo con CSS, tendrias que añadir alguna funcionalidad con javascript o usar un plugin especializado.
He copiado el código tal y como explicas, pero cuando intento ir con el ratón a alguna de las opciones del submenú, desaparecen sin darme tiempo a clicar en ellas. Debo añadir algo al código?
Gracias!
En que navegador lo estas probando? tienes la URL donde lo estas probando?
Chrome. Aún no tengo la URL disponible. Copié tal cual el código que pusiste.
Hola como dice Carol cuando pongo el raton por encima del submenu, me desaparece. Tengo que añadirle algo? Gracias
Tienes la URL donde lo estas probando?
Hola Josue:
Tengo un problema con la web que estoy creando. Soy un poco nuevo, así que entenderás que el problema sea tonto 😀 La página es http://crececontuweb.es/palanco3/
El problema está en el menú desplegable. Al tener tantos submenús, los elementos de menú más a la derecha, me despliegan los submenús de tal modo que se salen de mi pantalla (fíjate en el menú ‘Celulosas hostelería’). Tengo varias opciones para solventarlo (que se me ocurren, acepto cualquier otra):
1. Que a partir de un determinado elemento, flote el desplegable hacia el lado opuesto de como lo hacen ahora. Supongo que dándoles IDs diferentes a según que elemento puedo hacerlo, pero no sé cómo hacerlo exactamente.
2. Que independientemente de qué elemento padre provenga, todo el desplegable se ubique en una posición fija justo debajo del menú principal, y no debajo relativamente de cada elemento padre. Así evitaría que se saliesen. Tampoco sé cómo hacerlo.
Espero que me puedas echar una mano, Gracias!!
Ok, creo que lo he conseguido! Gracias de todos modos. En cualquier caso, si quieres echarle un vistazo al menú y sugerirme algún modo sencillo (just CSS) de mejorarlo, estaré eternamente en deuda 😉
Gracias!
Gracias por el tutorial, pero tengo una duda, como hacer para que quede centrado, intenté ponerlo en una tabla y centrarla pero no funciona, muchas gracias….
Puedes intentar asignando una medida al menú con ‘width’ y después centrarlo con ‘margin:0 auto;’
Saludos.
Lo que dice Jose Luis, o en ultima ponlo dentro de un <center>
Gracias por el tutorial, me parece muy bueno poder descargar el ejemplo para así poder experimentar con los códigos. Excelente página!
Hola Josue, ya tengo funcionando el menú expandible. Sabes cómo puedo hacer para q al pinchar sobre las distintas pestañas cambie aleatoriamente de cabecera… pero dejando la pagina de inicio siempre con la misma cabecera.
http://mispadressonprimerizos.blogspot.com.es/
Gracias y salu2
Cuando se esta en una de las paginas interas que pertenece a X menu? porque haz puesto los menus de primer nivel con enlace a #, para hacerlo tendrías que hacer algún mecanismo dentro de tu plantilla de Blogger, si fuera WordPress te podría ayudar mas especificamente.
Casi lloré al encontrar esto…
….Espera, olvida el «casi»
¡Gracias!
que tal Josue, una excelente pagina llena de grandes recursos, muchas gracias por tus tutoriales… sigue asi!!!….. GRACIAS!!!!
hola, tome el ejemplo que muestras para hacer un menu con submenus, pero no me muestra los submenus, gracias , estan interesantes tus ejemplos..
Pueden ser muchas cosas, si tienes la URL donde lo estas probando ponla.
hola Josue, una pregunta, como hago para que tenga propiedades de transpariencia;
solo los sub-menus. o que soporten una imagen (para q de el efecto de transpariencia. mi idea es hacerla un defenfoque al fondo q esta atras de los menus ). si hay donde hago los cambios 🙂
gracias de antemano.
una consulta mas que no es referente al tema: tengo un sistemas de comentarios … como hago para q este mande un mensaje al mi correo u otro cada vez q alguien deje un comentario… utilizando cualquier servicio de mensajeria. (nose si hay mail php).
Con RGBA (background: rgba(0, 0, 0, 0.5);) donde 0.5 es el valor de Alpha (transparencia), tambien puedes usar un png con transparencia.
Sobre los comentarios, usas WordPress? yo uso este plugin http://wordpress.org/extend/plugins/subscribe-to-comments/
Gracias hare la prueba …. luego comento de como me fue 😉
Josue:
Desde Buenos Aires te mando un gran abrazo y te felicito por tu buena predisposición. Tu ejemplo de menú desplegable es muy util y práctico me servirá de mucho en mis proyectos futuros.
Muchas Gracias.
Hola Josue, tu menú es el único que ha cumplido con lo que quiero, obviamente le he hecho hartos ajustes a la planilla para que quede perfecto. Es más, como lo tengo ahora está perfecto, cumple mis requisitos. Pero tengo dos problemas que me tienen loco:
1- Los «Botones» del menú principal son muy grandes, los puedo adecuar poniendo «height» en «.nav li a {«, pero las palabras no se centran a la altura cuando modifico el height. solo se reduce el margen de abajo hacia arriba
2- Una vez que modifico el height, se me desordena la posición de los submenu, ya no empiezan desplegados junto al submenu.
He intentado de todo, margin, padding, etc.
Si tienes una idea de como lograrlo me ayudarías mucho, ya que me gustaría que los botones principales fueran más pequeños (y las palabras centradas a la altura del botón) pero sin alterar la posición del desplegado del submenu.
Mi página en proceso http://chirisushi.blogspot.com/
Muchas gracias
Hola Fernando, mira no te entendi muy bien pero por lo que veo en tu ejemplo al parecer funciona correctamente, sin embargo me parece que estas queriendo definir la altura de los ‘li a’ sin usar padding, osea con height y mantenerlos centrados verticalmente (?), eso lo puedes hacer con line-height:
height: 35px; // si defines 35 de alto
line-height: 35px; // defines 35 de line-height y asi se centrara verticalmente
padding: 0 25px; // luego el padding lo puedes dejar solo a los lados.
Josue, ahora que lo veo me parece tan simple, muchas gracias, pero aún no puedo lograr que los subsub-menus queden a la altura. me explico:
Si te das cuenta donde dice: EVENTOS/Eventos/Opción 01
http://chirisushi.blogspot.com/
Los subsub-menu (Opción 01) no los puedo dejar a la altura de Eventos, obviamente lo mismo con el resto.
Te dejo el código que tengo puesto:
* {
border-radius: 10px; /* redondear botón */
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
.nav > li {
float:left;
}
.nav li a {
background:#A5130F;
color:#FFF;
display:block;
border:1px solid;
padding: 0 25px;
height: 10px;
line-height: 10px;
}
.nav li a:hover {
background:#A5130F;
}
.nav li ul {
display:none;
position:absolute;
min-width:170px;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-177px;
top:1;
}
Te agradecería un montón si me ayudas con esta.
Saludos
Muy interesante el menú,secillo y rápido.Lo he variado un poco para mi primera pagina web.Muchas gracias,un saludo
Veo que al copiar ha puesto los ítems del menú, pero a mi me salen en horizontal tal como en tu menú.
Gracias
Hola Campeon, me has salvado la vida una y otra vez este menu, no cabe duda que es uno de los mejors tutoriale que he visto y seguido, seguro esta en mi top10 !!!! tengo una duda como hago para que los submenus se desplieguen a el lado izquierdo?
Gracias y Saludos
Inviertes el valor de right aqui:
.nav li ul li ul {
right: 140px;
top:0;
}
Sos un genio, lo había intentado donde no era!!! Problema resuelto ÉXITOS BRO’
hola josue buen dia tengo un problema con el sitio que estoy haciendo baje un menu con jquery-slideshow lo implemente al index lo que pasa es cuando le doy click a alguna pestaña del menu me baja la imagen que se encuentra debajo del menu le eh estado buscado pero nada si me puedes ayudar te lo agradeceria…
Estas implementando este menu? pasame la URL de la pagina.
Ya he resuelto el problema poniendo en el css
.nav > li {
float:left;
position: relative;
left: 20%;
}
Gracias de todos modos, seguiré tu web con interés
Que tal Josue, ayer escribí una consulta pero no la veo el día de hoy, así que molesto nuevamente,
Estoy implementando el menú en este sitio, pero no he logrado por mas que lo intento que al poner el desplegable lo posicione debajo del menú normal, ni tampoco que el tamaño sea el adecuado.
Por favor, le ruego darle un vistazo a ver si puedes recomendarme algo.
Saludos de antemano,
http://www.pcconsultorescr.com (en la parte de tiendas)
Ponle valor top a .nav li ul:
.nav li ul{
top: 50px;
}
Genial!! Josué. Una maravilla
Te agradezco un montón.
Igual que otro montón de gente, sigo tus tutoriales con mucho interés.
Bendiciones
Hola Josue. Muy bueno tu tutorial. Mil gracias !!!
Estoy haciendo tu tutorial para un trabajo de Universidad y necesito crear 2 submenus mas ala DERECHA en este submenu ..(los que estan con la X antepuesta) he probado pero no me resulta…podrias decirme el codigo para esto? el submenu entrada salida resultado es una foto y podria ir a nueva ventana como hacer el enlace?
Grupo proceso Inic-Gestion integr trabajo-Desarrollar ActaConstituc proy- Xentrada-salida-resultado es una foto- Xdefinicion del resultado.
Es urgente Mil gracias por tu colaboracion.!!
Saluditos y buen dia !!
MargaritaMaria
–
Hola Margarita, no entendi tu comentario.
Hola un saludo Josue…. tengo varias preguntas: en esto del web ps andamos ya muy entrados, (veo tu pagina ¿tu la hiciste? imagino que si…) veo ademas varios efectos como a la derecha(de tu sitio, arriba) si uno pasa el mouse las imágenes encerradas en un circulo cambian a cuadradas, ¿como haces eso?, otra mas mi estimado Josue, veo que tienes dos cosas que me interesan (ojala y hagas un post sobre esto) tienes una cajita para «suscribirse» y ademas me agrada tus cajas de comentarios (osea esto), ¿podrias hacer un post de estas dos cosas? o bien si podrias publicarlo, para aprender mas en esto.
Sobre el Menú esta excelente, lo he copiado para estudiarlo….. realmente creo que la practica hace al maestro… saludos y felicidades por tu ejemplo…..
Hola Carlos, son varias cosas, los efectos de la derecha es CSS3, todo esta en este archivo, la caja de los comentarios es simple CSS, las suscripciones son de Feedburner, los anuncios son de Google Adsense.
ah!!! otra cosa quisiera me pasaras el tip como poner publicidad com la que tienes mero arriba, ¿te pagan por eso no?… plis porque ps esto de la web, cada vez se pone mejor…..
Hola ante todo felicitarte por el tutorial, de lo mejorcito que he podido ver.
Tengo una pregunta, ¿cómo puedo hacer para que los items sean cada uno de un color diferente y los submenús de tamaño diferente.
Gracias
supongo que deberías crearle un
.nav li ul li a{
background-color:el color que sea que sea;
}
Si verificado.
Si además quieres otro color distinto cuando pase por encima con el ratón
.nav li ul li a:hover{
background-color:el color que sea que sea;
}
Muchas gracias por el tutorial, la verdad es que estaba buscando la forma de crear un menú como este. Gracias me sirvió de mucho.
Hola Josue, Ochoa,,, al parecer se quedo encriptado mis datos, pues me han llegado mas de 3 correos de tu web, TURSOS; avisandome de que he cometnado en tu web… de favor haber si puedes quitar mis datos que quedaron como por default en las cajas de NOMBRE, MAIL Y URL…. saludos atte. Carlos m
creo que ya… se quito dejando en blanco espero ya no lleguen
Hola, tengo un menú de este tipo hecho y lo que quiero saber es cómo puedo hacer que funcione sin usar float:left. Gracias
Es por el z-index, ponle position: relative al menu y luego un z-index superior al del slider, z-index: 99999 es casi seguro que iria encima.
Hola, antes que nada mil gracias por tus comentarios, es de la unica web que pude lograr lo que deseaba. El unico tema es que el menu no logro que aparezca por encima de un slide de imagenes. Còmo debo corregirlo para que este por arriba de este? Gracias!!!
gracias excelente tuto 🙂
Hola Josue, excelente trabajo, excelente tutorial, te felicito y te agradezco por el, solo tengo un problema, lo estoy implementando, en IE lo veo bien pero en google chrome, no, creo que se debe a que estoy trabajando con una plantilla css de dynamicdrive, esa plantilla al parecer hace el el subnivel salga debajo de un div, el cual no permite verlo, no se si me puedas ayudar. saludos Jorge
Pasame la URL donde lo tienes.
Buenisimo!!!
Hola Josue saludos cordiales. mi pregunta es la siguiente como le haria para que el menu quedara centrado autompaticamente en la pagina. uso firefox y explores 7,8.
Hola Josue tengo un problema, mi menú le pongo un margin:45px, pero quiero que cuando se despliegue el menu hacia abajo no salga este margin, nose como hacerlo y lo he intentado de muchas formas, te lo agradezco de antemano.
A que le pones ese margin? al ul padre o al hijo, lo que quieres es que no afecte al hijo, solo al padre?
exacto, lo pongo al ul padre, y quiero que no afecte al hijo, ¿como lo puedo hacer?
Usa selectores directos, asi: ul > li{ … }
Excelente artículo y explicación Josue! Felicitaciones!! 🙂
Te dejo un ajuste para dar aviso de los «Submenues»:
En vez de:
Submenu 1▼
Usar:
Submenu 1
.con-submenu{
background-image:url(../images/layout/icono_menu_01.png);
background-position:right bottom;
background-repeat:no-repeat;
}
Y para lo que sea necesario, ajustar el padding derecho para posicionar la imagen, o utilizar otra imagen 🙂
Saludos!!
me funciona en CHROME pero no en IE.
me muestra cada elemento de la lista hacia abajo con un ancho de 100% y ademas no despliega nada =S
Hola Josue, en primer lugar quiero darte las gracias por compartir con nosotros tus conocimientos, es muy de agradecer. Quería preguntarte una duda que tengo con respecto a los menús desplegables (los hijos). El caso es que mi menú con sus submenús los tengo en un div e inmediatamente debajo tengo otro div. Cuando despliego un menú queda por detrás del div de abajo, osea que o se ven los hijos. ¿Qué puedo hacer para que el menú se despliegue sobre el div de abajo?
Gracias con antelación
Hola Josue, ante todo muchas gracias por tu generosidad y compartir este tutorial con todos. Estoy actualizando mi página y quiero aplicarle este menú desplegable múltinivel. Pero quisiera hacerle dos cambios primero centrarlo en la la página, el resultado más parecido que pude lograr es colocando en NAV padding:0 30%; pero esto le dá una posición fija y si variamos el tamaño de la ventana del navegador se desplaza y segundo darle al primer nivel un color blanco de fondo y al resto otro color pero ya he probado y no lo consigo, incluso con las respuesta que ya hay en tus comentarios. Abusando de tu generosidad te paso el link de la página http://www.msservicios.com.ar/vehiculosprueba.html para ver si podes darme una mano. desde ya muchas gracias.
Para lo primero, centralo con margin: 0 auto (necesita tener un width definido), y para lo segundo, selecciona el primer elemento li, ej: ul li:first-child{ background: white; }
Hola mi hermano muy bueno el tutorial aprendí bastante, pero tengo un problema, cada vez que intento usar otro navegador se me modifica la barra, en algunos navegadores se me pone muy pequeña y en otros se pone muy grande como hago para arreglar este problema? necesito que mi barra quede fija sin que se mueva en otros navegadores por favor se lo agradecería de verdad mi hermano.
Gracias, funciona muy bien …. saludos …
Hola.
Primero agradecerte la explicación de todos los pasos que haces, En otros sitios sólo te dicen copia y pega, Esto que has hecho se agradece mucho.
Quería preguntarte una pequeña duda.
Haces una clase nav en el primer ul y partes de ahi, haciendo esto el menú funciona como describes en el artículo. Pero he intentado adaptarlo a la nueva etiqueta estándar de html5. quedando el principio:
…etc
en el css cambiado el «.nav li ul» etc por «nav ul li….» lo que ocurre es que los submenús no salen uno debajo del otro sino uno al lado del otro. ¿sabes a que podría deberse?
Muchas gracias.
Un saludo.
Tendria que ver tu codigo, acabo de probar cambiando el div a nav y no hubo problemas, intenta cambiar el elemento pero manteniendo la clase, cosa que quedaria
Felicitaciones, maestro, muy interesante
Tengo una consulta: tengo un dropdown en una pagina y posee un menu desplegable con opciones, el problema esta en que cuando lo despliego no se muestra completo ya que hay mas filtros (dropdown o combobox) en la pagina que sobresalen, el codigo es mas o menos el sgte:
out.print(«»);
out.print(«Todas «);
out.print(«»);
que debo agregar para que mi menu desplegable se muestre sobrepuesto a todos los demas elementos que pueden haber?
te hago una pregunta..a esto lo quiero agregar submenus… pero no se como.. me podrias ayudar? espero tu respuesta gracias.
.submenu{ position:absolute; z-index:10; top:50px; left:0px;white-space:nowrap;}
.submenu > ul{ border-bottom: 1px solid #c6c6c7;}
.submenu ul > li{ display:block; height:29px; position:relative; text-align:left;}
.submenu ul > li:first-child{}
.submenu ul > li > a{ display:block;height:29px;line-height:29px; text-decoration:none; position: relative; font-family:’BebasNeueRegular’;font-size:16px; color:#717375; text-transform: uppercase; padding:0 8px; background: #e8e8e8;
transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;
}
.submenu ul > li > a:hover { text-decoration:none; background: #2bb8e6; color: #fff;}
Muchísimas gracias, Josue, por tan excelente tutorial, me está sirviendo de mucho.
Estoy rehaciendo un menú desplegable que hice modificando estilos de un Spry del Dreamweaver, puedes verlo en http://www.avelinosala.es. Este que está subido, (el spry), como ves, ahora funciona con Safari y Firefox perfectamente, pero algo debe ir mal con el java, porque en móviles y en tabletas no va bien (en Chrome directamente ni va). Así que estoy viendo la forma de hacerlo directamente con HTML y CSS (siguiendo tu tutorial), pues entiendo que es el java lo que da problemas.
Todo bien. Pero me encuentro con un problema. He consultado el aluvión de comentarios que tan generosamente has contestado, pero nadie se refiere a éste en concreto. El caso es que cuando voy al último subnivel, que se queda marcado con fondo gris, a mi me gustaría que también el anterior nivel se quede marcado con el fondo gris (como sucede ahora en http://www.avelinosala.es) pero no hago más que tocar el CSS aquí y allá y no lo logro.
Te adjunto las modificaciones que he hecho hasta ahora en tus CSS para adecuarlas a mi diseño.
Muchas gracias por tu ayuda.
* {
font-family:Arial, Helvetica, sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
.nav > li {
float:left;
width:110px;
font-size: 12px;
}
.nav li a {
background:#c6e5fa;
color:#000;
display:block;
padding: 0.5em 0.75em;
}
.nav li.submenu{
display: none;
}
.nav li a:not(:last-child) .submenu {
display: inline;
}
.nav li a:hover{
background:#d0d1d3;
}
.nav li {
position:relative;
}
.nav li ul {
display:none;
position:absolute;
min-width:110px;
font-size: 10px;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li ul {
right:-110px;
top:0;
}
Me parece que ya lo haz logrado, de todos modos para menus mas avanzados te recomiendo http://users.tpg.com.au/j_birch/plugins/superfish/
Gracias, Josue.
Sí, finalmente volví a hacerlo todo de nuevo partiendo de un menú de Stu Nicholls (CSS3 menús). Me costó un poquito trastear con las CSS sobre una de las plantillas, pero finalmente lo conseguí adecuar a mi diseño perfectamente.
Buenos dias Josue muy bien explicada tu entrada, me ha gustado mucho, yo estoy implementando un menu desplegable con superfish.js me funciona bien pero como tengo demaciados enlaces me los acomoda en 2 filas el menu, quisiera saber si se puede reducir las celdas sin disminuir el tamaño de la letra drasticamente, te anexo mi codigo:
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu li {
position: relative;
}
.sf-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 90;
}
.sf-menu > li {
float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
display: block;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu ul ul {
top: 0;
left: 100%;
}
/*** DEMO SKIN ***/
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu ul {
box-shadow: 2px 2px 4px rgba(0,0,0,.2);
min-width: 5em; /* allow long menu items to determine submenu width */
*width: 5em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu a {
border-left: 1px solid #fff;
border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */
border-top: 1px solid rgba(255,255,255,.5);
padding: .75em 1em;
text-decoration: none;
zoom: 1; /* IE7 */
}
.sf-menu a {
color: #2C5234;
font-family: «Fontana ND Ee OsF»;
font-size: 12px;
font-weight: bold;
}
.sf-menu li {
background: ;
white-space: nowrap; /* no need for Supersubs plugin */
*white-space: normal; /* …unless you support IE7 (let it wrap) */
-webkit-transition: background .2s;
transition: background .2s;
}
.sf-menu ul li {
background:#C5C8A2 ;
}
.sf-menu ul ul li {
background: #9AAEDB;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
background: #CFDEFF;
/* only transition out, not in */
-webkit-transition: none;
transition: none;
}
/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
padding-right: 2.5em;
*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
content: »;
position: absolute;
top: 50%;
right: 1.5em;
margin-top: -5px;
height: 0;
width: 0;
/* order of following 3 rules important for fallbacks to work */
border: 5px solid transparent;
border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
margin-top: -5px;
margin-right: -3px;
border-color: transparent;
border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
border-left-color: #000;
}
Pasame la URL donde lo estas probando.
Amigo tengo una duda con un estilo que estoy trabajando y no me desplega el menu :(, soy ing informatico pero no nos enseñan css y estoy trabajando en mi tesis para titularme y nesecito que se desplege mi menu 🙁 no funciono con los pasos que tienes tu, obiamente no funciona por que el css de propiedades es diferente aun asi me podrias hechas una mano?
/*
TOP
*/
div#header-top{
width:960px;
height:60px;
float:left;
}
ul#menu{
float:right;
margin:13px 0;
list-style-type:none;
background:#05111e;
border:1px solid #163755;
position:relative;
padding:0 10px 0 0;
z-index:100;
}
ul#menu li{
display:none;
float:left;
position:absolute;
}
ul#menu li a,
ul#menu li a:active,
ul#menu li a:visited{
float:left;
padding:5px 12px 7px 12px;
padding:6px 12px 6px 12px9;/* IE8 and below */
color:#fff;
}
ul#menu li a:hover{
background:#000;
text-decoration:none;
}
ul#menu li a.ddar{
}
ul#menu li.sep:first-child a{
-moz-border-radius-bottomleft:5px;
-moz-border-radius-topleft:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
ul#menu li.sep{
border-right:1px solid #000;
}
ul#menu li.sep a{
border-right:1px solid #091929;
}
ul#menu img{
width:12px;
height:12px;
float:left;
margin:10px 0px 0 10px;
cursor:pointer;
}
ul#menu img#login{
margin-right:4px;
}
/* second level */
ul#menu li ul.second{
min-width:140px;
position: absolute;
top:31px;
left:-1px;
z-index:1000;
margin:1px 0 0 0;
padding:14px 0 0px 0;
display:none;
overflow:hidden;
}
ul#menu li ul.second li{
width:140px;
float:left;
display:inline;
padding:0;
background:#0f1d2a;
position:relative;
}
li.activeli{
background:#010305;
}
ul#menu li ul.second li a{
width:128px;
float:left;
margin:0;
border:none;
padding:6px 0px 6px 12px;
color:#fff;
}
ul#menu li ul.second li a:hover{
background:#000;
color:#FFF;
}
/* thirth level */
ul#menu li ul.second li ul.thirth{
width: 140px;
position: relative;
top:31px;
right:-140px;
z-index:1000;
margin:1px 0 0 0;
padding:14px 0 0px 0;
display:none;
overflow:hidden;
}
ul#menu li ul.second li ul.thirth li{
width:140px;
float:left;
display:inline;
padding:0;
background:#0f1d2a;
}
li.activeli{
background:#010305;
}
ul#menu li ul.second li ul.thirth li a{
width:128px;
float:right;
margin:0;
border:none;
padding:6px 0px 6px 12px;
color:#fff;
display:block;
}
ul#menu li ul.second li ul.thirth li:hover{
background:#000;
color:#FFF;
display:none;
}
Ahi estan las propiedades del menu drop down 3, nose si deje algo mal o todo la verdad nose de css alguien me ayuda?
Pasame la URL donde lo estas probando.
Buenas presentaciones te felicitos y gracias por compartirnos tus conocimientos
Muchas gracias! me ayudaste mucho! bendiciones
Josue, muy buena tu explicacion, porque vas paso a paso, y vemos los cambios, solo me quedan algunas dudas,
Para una web que quiero hacer modifique los menus y en vez de float:left; le puse float right; y me inviertio el orden de los menus, con que funcion hago que no se invierta?
tambien te comento que la lista de un submenu es algo larga y quisiera que tuvieran menos diferencia de espacio entre cada submenu como lo modifico?
y tmb te comento que en el css al principio puse
body {
background: url(fondo.gif);
}
y ps me pone el fondo pero se repite la imagen como puedo hacer que se ajuste al tamaño de la pantalla es por poco lo que se repite como tipo mosaico, le puse abajo un width 100%; pero no funciono
Saludos
Puedes explicarme con este ejemplo lo de position relative y absolute,lineas 27 y 35-36-37.Gracias
¿que quieres decir con:llevaran position:absolute para que no afecten el ancho del menu principal?
y luego ….al mismo novel que su ancestro li que tiene position:relative.Gracias
Cuando un elemento lleva position: absolute entra en otro espacio de posicionamiento, es como si flotase encima del resto de elementos (por ende su ancho es ignorado), sobre lo otro se pone relative al padre para que el hijo que tiene absolute se posicione en relacion al padre, de lo contrario el campo de posicionamiento de este elemento seria el elemento body. Se que es confuso al principio, te recomiendo hacer pruebas aqui para que lo vayas entendiendo mejor: http://codepen.io/pen
y encima de que resto de elementos esta flotando en este caso?
ni idea.
.nav li ul{
display.none;
position:absolute;
min-width:140px,
}
No entiendo.Me dicen que es para que se quede fijo algo,pero no se el que.No entiendo este codigo
ni idea.
.nav li ul{
display.none;
position:absolute;
min-width:140px,
}
No entiendo.Me dicen que es para que se quede fijo algo,pero no se el que.No entiendo este codigo
.nav li ul li{
position.relative;
}
Incluso si quito el relative,el menu se muestra bien
¿Cual es el padre y el hijo aqui?¿son cajas anidadas?
Muchas Gracias popr el tutorial, muy ilustrativo y claro. Sólo una pregunta:
Si quiero crear el menú dinámicamente con datos de un recordset y con niveles de anidamiento variables como se haría?
excelente tutorial mi unica pregunta es como centrar el menu ya lo intente con margin:0 auto; pero no centra
si alguien me puede ayudar muchas gracias
saludos amigo deseo saber como poner viñetas a mi menu, podrias ayudarme
Quiero hacer un menu desplegable , pero ya tengo hecho el menu horizontal con imagenes y quiero que de una imagen se desplegue un menu vertical como lo haria ? Por favor es urgente
hola, muy interesante, puedes mandarme completo como para insertarlo directo a mi web? estoy aprendiendo y no te entendi mucho, me serviria tremendamente grande si me ayudas, mil gracias de antemano
no puedo instalar, entender y peor aun no encuentro mas bonito que lo tuyo pero ahora empese con una pagina de ventas en suecia, lo cual ya esta claro! pero solo me falta los menus y submenus y esto ya me tomo muchisimos dias!!! tratando y buscando, porfavor espero puedas ayudarme!
Me sirvio, muchisimas gracias por compartir tus conocimientos. Saludos.
muy útil muchas gracias
No funciona el link del demo ni tampoco el de descarga. Podrian solucionarlo estimado.
Magnificent beat ! I would like to apprentice while you amend your site, how could i
subscribe for a blog site? The account helped me a
acceptable deal. I had been tiny bit acquainted of this your broadcast offered bright clear idea
Aw, this was an extremely nice post. Taking a few minutes and actual effort to make a really good article… but what can I
say… I procrastinate a lot and don’t seem to get nearly anything done.