Crea tu propio menú desplegable con submenús dentro! Todo eso con solo HTML y CSS sin la necesidad de lenguajes como javascript.

Share on Pinterest
Comparte con tus amigos










Enviar

En este tutorial aprenderás como hacer un menú desplegable con HTML y CSS de una manera muy sencilla, con pocas lineas de código sin tener que utilizar javascript de por medio.

 Como hacer un menú desplegable – Videotutorial

 

<html>
	<head>
		<title>Menu Desplegable</title>
		<style type="text/css">
			
			* {
				margin:0px;
				padding:0px;
			}
			
			#header {
				margin:auto;
				width:500px;
				font-family:Arial, Helvetica, sans-serif;
			}
			
			ul, ol {
				list-style:none;
			}
			
			.nav > li {
				float:left;
			}
			
			.nav li a {
				background-color:#000;
				color:#fff;
				text-decoration:none;
				padding:10px 12px;
				display:block;
			}
			
			.nav li a:hover {
				background-color:#434343;
			}
			
			.nav li ul {
				display:none;
				position:absolute;
				min-width:140px;
			}
			
			.nav li:hover > ul {
				display:block;
			}
			
			.nav li ul li {
				position:relative;
			}
			
			.nav li ul li ul {
				right:-140px;
				top:0px;
			}
			
		</style>
	</head>
	<body>
		<div id="header">
			<ul class="nav">
				<li><a href="">Inicio</a></li>
				<li><a href="">Servicios</a>
					<ul>
						<li><a href="">Submenu1</a></li>
						<li><a href="">Submenu2</a></li>
						<li><a href="">Submenu3</a></li>
						<li><a href="">Submenu4</a>
							<ul>
								<li><a href="">Submenu1</a></li>
								<li><a href="">Submenu2</a></li>
								<li><a href="">Submenu3</a></li>
								<li><a href="">Submenu4</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="">Acerca de</a>
					<ul>
						<li><a href="">Submenu1</a></li>
						<li><a href="">Submenu2</a></li>
						<li><a href="">Submenu3</a></li>
						<li><a href="">Submenu4</a></li>
					</ul>
				</li>
				<li><a href="">Contacto</a></li>
			</ul>
		</div>
	</body>
</html>

 

Demo: https://www.falconmasters.com/demos/menu-desplegable.html

Código en Github: https://github.com/falconmasters/tutoriales/blob/master/menu-desplegable.html

 

Preguntas Frecuentes

P: Como puedo centrar el menú horizontalmente?

Respuesta: Se supone que el menú que tienes debería estar centrado, ya que al id header ya le agregamos un ancho y un margen automático, en el extraño caso de que no tuvieras centrado tu menú debes seguir los siguientes pasos.

Es muy sencillo, lo único que tienes que hacer es tomar todo el código que se encuentre dentro de la etiqueta <ul class=»nav»> y encerrarlo en otra etiqueta, en este caso utilizare una etiqueta html5 llamada nav, (etiqueta que debí usar en el menú desde el principio, pero para no confundirlos no la puse) y a esta ultima etiqueta nav agregarle con CSS un ancho y un margen automático para que se centre, el código quedaría algo asi:

<html>
	<head>
		<title>Menu Desplegable</title>
		<style type="text/css">
			
			* {
				margin:0px;
				padding:0px;
			}
			
			#header {
				margin:auto;
				width:500px;
				font-family:Arial, Helvetica, sans-serif;
			}
			
			ul, ol {
				list-style:none;
			}
			
			.nav {
				width:500px; /*Le establecemos un ancho*/
				margin:0 auto; /*Centramos automaticamente*/
			}

			.nav > li {
				float:left;
			}
			
			.nav li a {
				background-color:#000;
				color:#fff;
				text-decoration:none;
				padding:10px 12px;
				display:block;
			}
			
			.nav li a:hover {
				background-color:#434343;
			}
			
			.nav li ul {
				display:none;
				position:absolute;
				min-width:140px;
			}
			
			.nav li:hover > ul {
				display:block;
			}
			
			.nav li ul li {
				position:relative;
			}
			
			.nav li ul li ul {
				right:-140px;
				top:0px;
			}
			
		</style>
	</head>
	<body>
		<div id="header">
			<nav> <!-- Aqui estamos iniciando la nueva etiqueta nav -->
				<ul class="nav">
					<li><a href="">Inicio</a></li>
					<li><a href="">Servicios</a>
						<ul>
							<li><a href="">Submenu1</a></li>
							<li><a href="">Submenu2</a></li>
							<li><a href="">Submenu3</a></li>
							<li><a href="">Submenu4</a>
								<ul>
									<li><a href="">Submenu1</a></li>
									<li><a href="">Submenu2</a></li>
									<li><a href="">Submenu3</a></li>
									<li><a href="">Submenu4</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="">Acerca de</a>
						<ul>
							<li><a href="">Submenu1</a></li>
							<li><a href="">Submenu2</a></li>
							<li><a href="">Submenu3</a></li>
							<li><a href="">Submenu4</a></li>
						</ul>
					</li>
					<li><a href="">Contacto</a></li>
				</ul>
			</nav><!-- Aqui estamos cerrando la nueva etiqueta nav -->
		</div>
	</body>
</html>
Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

199 respuestas a “Como hacer un menú desplegable con HTML y CSS”

  1. xD dice:

    Hola disculpa a mi no me sale así en horizontal a que se deberá?

  2. Leonardo Javier Maturana Verga dice:

    una pregunta amigo…. tengo un problema no se me muestran lkos menus al pasr el raton encima???? que puede ser

    • El problema esta en los hovers entonces, revisa de la linea 48 a 50 este código, que no tengas errores:

      .nav li:hover > ul {
           display:block;
           }
      
      • Leonardo Javier Maturana Verga dice:

        Amigo aun no logro encontrar el error
        te adjunto mi codigo a ver si me puedes orientar

        Portada

        body {
        background-image: url(imagenes/fondo%20madera.gif);
        }
        * {padding:0px;
        margin:0px;
        }
        #header{margin:auto;
        width:auto;
        font-family:»Comic Sans MS»;
        }
        ul, ol{
        list-style:none;
        }
        .nav li a {
        background:#FFBF00;
        color:#045FB4;
        text-decoration:none;
        padding:10px 15px;
        display:block;
        }
        .nav li a:hover{
        background:#BDBDBD;
        }
        .nav > li{
        float:left;
        }
        .nav li ul {
        display:none;
        position:absolute;
        min-width:150px;
        }
        .nav li a:hover > ul {
        display:block;
        }

         

        Útiles
        Mi Escuela
        Inspectoria
        Actualiza tus Datos
        Docentes
        Menú
        Apoderados
        Correo STLS
        Agenda Semanal
        Puebas
        Guías de Estudio
        Talleres Escolares
        Extensión Universiraria
        Fotografías

        Inicio

        ¿Quiénes Somos?

        Proyecto Educativo
        Nuestra Filosofía
        Misíon
        Academia
        Visión

        Admisión

        Mateo-Net

        Mineduc

        Charlas Postulación 2014
        Becas y Creditos 2014
        Memorias Ayudadas Estudiantiles
        Rebaja Cuota CAE

        Contacto

        Estimados Apoderados……. se les recuerda que el día viernes 02 de mayo se realizarán clases Normales

         
         
         
         
         
         
         
         

         
         
         
         
         
         
         
         

         
         
         
         
         
         
         
         

         
         
         
         
         
         
         
         

         
         
         
         
         
         
         
         

         
         
         
         
         
         
         
         

         
         
         
         
         
         
         
         


        Sitio Optimizado para Mozilla Firefox
        http://www.mavalnet.cl

        • Te recomiendo que tu código lo pongas aquí, es mas fácil que me lo muestres de mediante esa plataforma: http://codepen.io/pen/

          El error esta en que en el codigo css no especificas donde esta el nav y el ul, el problema que tienes es que estas haciendo un sitio web con tablas, los sitios web no se hacen con tablas, eso no se hace desde hace 10 años, utiliza divs, es mucho mejor y no tendrias problemas como el que tienes ahora.

  3. Luis Gomez dice:

    Excelente :P

  4. Snilek dice:

    Exelente aporte… bueno yo tengo una duda en el código ya que me aparece por debajo de un los submenús es decir se empalma arriba y no me deja ver los submenús.. agradecería una ayuda… XD

  5. Snoopy diaz dice:

    Tengo un problema, el asterisco (*) me aparece inactivo en el editor de texto cuando lo escribo, o sea, no parece hacer una función, no cambia de color ni nada de eso. Los atributos que contiene asterisco (*) no cambian de color.

    * {
    margin:0px;
    padding:0px;
    }

    • No tiene porque cambiar de color necesariamente, depende del editor de código que tengas

      • Snoopy diaz dice:

        sí, pero cuando actualizo el .html no me cambia nada en la vista previa del navegador. No será de .css ese atributo, y por qué a ti te funciona en el .html?

        • Si que es de CSS, pero en realidad no importa si cambia el color o no lo que importa es que elimine todos los margenes y paddings de todos los elementos, la magia no ocurre con el editor de código, ocurre con el interprete que es el navegador web.

          • Snoopy diaz dice:

            Ahora le aplique los submenu a mi página, ¿Qué hago para hacer desplegable los menú de mi página ya hecha sin alterar el color y la posición?

          • Tienes que analizar la estructura html del menú de tu pagina y aplicarle estilos CSS, no es algo fácil y se te va a complicar si no entiendes el código css.

      • Snoopy diaz dice:

        Me retracto, tienes razón con lo de no tiene que cambiar de color. Probé
        tu código que tienes en GitHub y me funcionó, alguna otra cosa tengo
        mal, jeje.

        Ahora lo que me gustaría es aplicarle un menú desplegable a mi página web ya hecha, sin alterar el color y la posición de mi menú.

  6. fantom dj dice:

    problemas amigo habré la pajina pedida ,dentro de un recuadro este código pero no deriva a ella gracias de todos modo algo funciona se ve en la pejina

  7. jose ochoa dice:

    como poner un url alos botones

  8. ramon dice:

    la barra no me centra

  9. marcos rodrigo dice:

    como puedo poner el menú desplegable en una sola linea por que no quiero que este en dos?? como lo puedo hacer??

  10. Luis Garcia dice:

    como puedo poner el menu en otro lado de la pagina que no sea arriba?

  11. Victor Julian Laboinet dice:

    Hola Amigo hise todoLo que dijiste acerca de el menu del video: http://www.youtube.com/watch?v=oZa2Ut8u2S0 pero Hubo demasiados comandos que no funcionaban…..
    Pero en fin ya lo arregle pero Podrias hacer un video de como al darle cilck A un

    Nos lleve a otro fondo?

  12. Alex Espinoza dice:

    Como agregarías animación a su visibilidad ?
    algún ejemplo (código)

  13. nayib quessep dice:

    copiar y pegar el codigo HTML y el codigo CSS: https://www.facebook.com/nquessep/posts/829397587092766

  14. Vicente Castilo dice:

    ¿Porqué cuando pongo mas de 4 items en el menu, me aparece abajo?
    asi mira

  15. Gaston dice:

    la barra no me ocupa todo el largo de la pantalla, pude ajustarlo un poco modificando el tamaño de la fuente, pero me sigue faltando un poco, como podria hacer esto ? o sea tengo un banner con fondo y la barra la quiero colocar debajo pero es como que el fondo negro ocupa segun lo que haya escrito

  16. Sebastian Arias dice:

    como le cambio el color al menu?

  17. martin dice:

    hola muy bueno el menú pero en ie no funciona me podrías ayudar gracias

  18. Bstrt dice:

    Hola y gracias por esta información. He añadido este menu fijo flotante en mi web y el único problema es que la siguiente parte al afectar a todo me descoloca el resto de elementos de la web:
    * {
    margin:0px;
    padding:0px;
    }
    Hay alguna modificación posible en tu código para evitar usar el *, o bien que no afecte al resto de la web si no solo a tu menú? Gracias y saludos!

  19. Weena Jimenez dice:

    Excelente, muchas gracias por dedicar este tiempo a hacer tan buena explicación

  20. Emanuel Pons dice:

    Muy buenos y re fáciles de entender tus videos Carlos.. una consulta, si quiero que el menu aparezca en todas las paginas ¿tengo que repetir el codigo en todas o hay alguna alternativa?

    • Si, tendrias que repetir el código, hay varias alternativas, desde hacer algo mas complejo con PHP, o hacer archivos por cada elemento e importarlos también con PHP, mediante include();

      Si quieres saber mas dime y hago un articulo.

      • Emanuel Pons dice:

        Tengo conocimientos medios a básicos en php y me interesaría si tenes tiempo para explicar este método sería re útil.. Muchas gracias

  21. Miri Suarez dice:

    Hola podrías decirme si puedo agregar este menú a una tabla en dreamweaver?

  22. Daniel Gomez dice:

    quisiera saber como hacer que el menu deplegable quede un poco mas centrado, que la posicion que ocupe en la pagina sea centrado. he hecho unas personalizaciones y al hacerla el menus se ve un poco a la izquierda y necesito que este al centro

  23. jota dice:

    Estimado muy buen tutorial me encanto pero me e dado cuenta que en mozilla no se desliza me podrias ayudar por favor, gracias.

  24. Smerlyn Dävid Gälvän dice:

    Hola! Carlos Arturo, Podrias darme el Enlace o Link de descarga del «Aptana» para 32 bits?
    (Gracias de antemano!)

  25. Alonso Gonzalez dice:

    Disculpa, como puedo hacer que el menu me abarque toda la pantalla?

  26. Yesenia dice:

    Disculpa ,el .nav es el nombre que le asignemos al ul ?

  27. Lucas Jappert dice:

    En IE no me funciona

  28. Miguel Ángel Rosales Velasquez dice:

    Excelente!

  29. Alee dice:

    disculpa, para poner en otro doc la parte css? osea en el html mandar a llamar css? como lo hago :O

  30. maria dice:

    Menu Desplegable

    * {
    margin:0px;
    padding:0px;
    }

    #header {
    margin:auto;
    width:500px;
    font-family:Arial, Helvetica, sans-serif;
    }

    ul, ol {
    list-style:none;
    }

    .nav > li {
    float:left;
    }

    .nav li a {
    background-color:#000;
    color:#fff;
    text-decoration:none;
    padding:10px 12px;
    display:block;
    }

    .nav li a:hover {
    background-color:#434343;
    }

    .nav li ul {
    display:none;
    position:absolute;
    min-width:140px;
    }

    .nav li:hover > ul {
    display:block;
    }

    .nav li ul li {
    position:relative;
    }

    .nav li ul li ul {
    right:-140px;
    top:0px;
    }

    Inicio
    Servicios

    Submenu1
    Submenu2
    Submenu3
    Submenu4

    Submenu1
    Submenu2
    Submenu3
    Submenu4

    Acerca de

    Submenu1
    Submenu2
    Submenu3
    Submenu4

    Contacto

  31. handha100 . dice:

    Como puedo hacer que sea un menu desplegable

  32. Miroslava Altamirano dice:

    Me encanta el menú pero me queda solo en la parte de arriba de mi blog y quiero sabe como moverlo de lugar. Gracias

  33. Ana Gonzalez dice:

    hola una preguntota yo lo quiero de forma vertical
    como le puedo hacer para que se despliegue el submenu de lado y no hacia abajo ?
    es que ya le intente y no puedo :( no me sale

  34. Luis dice:

    Hola, quiero hacer un menú desplegable pero necesito que quede en vertical a la izquierda, que tengo que hacer? por cierto excelentes tutoriales,

  35. Ale dice:

    Hola Carlos :D Disculpa, la barra no se centra y ya agrege el código que escribiste en el post, me podrias sugerir algo, por favor. Gracias

  36. Nicolas Alfonso Hernandez Cald dice:

    cual es el programa que utilizan para programar ?

  37. Angelica Vasquez dice:

    como hacer para que cuando le des al menu salga la pagina que quieres

  38. David Fuentes dice:

    Muchísimas gracias, buscaba un tutorial justo como éste. Saludos!

  39. Guest dice:

    como podría ponerle un sub-sub menú?, si me puedes sacar de la duda por favor!.

  40. miguel dice:

    hola una pregunta me gustaria que mi sub menu tuviera otro submenu pero cuando lo coloco mira que me pasa
    espero y me puedan ayudar

    • Ambrosio Henríquez dice:

      en la zona del estilo en la pestaña de «.nav li ul li ul» deves cambiar el numero de «right» al numero de pixeles que quieres de separacion, entre mas numeros negativos ayan mas lejos quedara, deves ir provando! DND

  41. pilar dice:

    Hola, disculpe como puedo hacer para que el mismo menu del ejemplo se
    vea hacia abajo y que sus enlaces se habran hacia arriba? Espero su
    respuesta, gracias. Le adjunto la imagen para explicarme mejor.

    • Christian Andres Castro dice:

      Hola, me sirvio el tutorial, lo que no entiendo bien es como ponerlo al lado izquierdo…si me puedes decir como hacerlo te lo agradeceria mucho

  42. Emmanuel Sequera dice:

    como hago para que el submenu que sale de configuracion no se corra tanto a la derecha?

  43. Erick dice:

    ¡Hola!

    Excelente tutorial y gran aportación

    Soy principiante en esto

    Solo que tengo dos problemas que son los siguientes:
    1.El menu no se centra completamente a pesar de que le agregue el id header que indicaste
    2.Cuando quiero poner contenido este se pone a la derecha del menú y no abajo

    Para lo del contenido modifique que el menú estuviera dentro de y mi contenido en pero no hubo resultado, también trate un salto de párrafo pero es lo mismo.

    Si me pudieras ayudar te lo agradecería mucho.

  44. Rob Amaya dice:

    Hola Carlos Arturo!!
    Tu sitio y tus tutoriales estan geniales!!!
    Felicidades por tus metas alcanzadas!!
    Necesito de tu ayuda con el menu.
    Busco la manera de implementarlo para wordpress, de tal manera que siga siendo multivel, y no he podido lograrlo, te agradecere mucho tu pronta ayuda.

  45. mart dice:

    hola, el menu desplegable del video yo lo hice en frontpage y segui paso x paso del tutorial anotando el codigo en frontpage y al terminarlo no me salio como en el video y nose que paso, si segui exactamente los pasos

  46. BryJ dice:

    Amigo, disculpa, que funcion tiene «margin: auto»?

  47. luis villamil dice:

    una pregunta como puede escribir dentro del menu, osea dentro de contáctenos cuando haga clck me mande a la siguiente pagina donde este la inforacion

  48. Junior XD dice:

    disculpa como puedo hacer mas grande la letra del texto del menu sin que se bajen

  49. The Turtle World H dice:

    entre submenu y submenu me sale una barra sin cubrir como puedo cambiar eso?

  50. Pedro Kamt Jesfen dice:

    hola, como podría hacer esta barra en vertical? … saludos

  51. Walter Francisco Verdud dice:

    Hola arturo, sigo tus tutoriales desde youtube!
    Queria preguntarte como hago para poner otros menus a los largo, por que agregue mas y me salen centrados y para abajo, yo quiero que se vayan para la derecha..

    Saludos!!!

  52. Gustavo Angel Avila dice:

    Exelente, solo le cambiare el tamaño :D

  53. eduardo dice:

    no se desplegar donde pudo ocurrir la falla?

  54. FJ dice:

    Como hago para poner en el menu un buscador

    ¡¡¡¡?

  55. Cristhian Stark dice:

    Puse el menú horizontalmente del lado derecho de la pantalla y ahora quiero que al hacer clic aparezca del lado izquierdo sin salirse de la pagina ¿Me puedes decir como hacerle? Por Favor

  56. queque2004 dice:

    Como se hace para que el menú pueda aparecer en varias páginas

  57. Luis BT dice:

    Hola. como puedo darle el tamaño y posición de este menú con como el otro que hiciste con imagenes, quiero este estilo pero de ese tamaño porfavor ayudame

  58. Claudio González dice:

    Excelente tutorial. Lo seguí y le realice algunas modificaciones visuales y me quedó bárbaro. Pero tengo un problema: trabajo con directorios, entonces el menú no es más que un enlace al directorio que me interesa, pero luego de que me muestra el html del directorio que seleccione, no se me despliega nuevamente el menú, ya no queda desplegable, me muestra el menú pero no los subitems, ¿qué podría estar ocurriendo?.

  59. Lidia Espinosa dice:

    ¡Hola! Llevo siguiendo tus tutoriales sobre html y css desde YouTube, eres en verdad grandioso y estoy enamorada de tu voz <3
    Bueno, a lo que voy: diseñé mi propio menú desplegable con las etiquetas correspondientes y todo va perfecto cuando lo introduzco en la parte correspondiente del blog. Pero al momento de añadirle el css, me queda descuadrado y sin forma. Intenté hacerlo paso por paso, tal como lo explicas en tu video, dándole diseño a cada cosa de a poco, y lo logré, solo que hay un pequeño detalle: los submenús quedan empalmados con el menú principal y no se despliegan en vertical sino en horizontal. ¿Qué es lo que estoy haciendo mal?

    De antemano, gracias si te diste el tiempo de contestar nwn

    • wow muchas gracias, eres la primer persona que me dice que le gusta mi voz.
      Sobre tu problema, estas realizando el menu en blogspot o en que plataforma?
      Si es así es muy probable que el error sea debido a que blogspot tambien agrega código CSS para sus plantillas, ese código css puede estar afectando el menu.

      Sobre el empalmado pueden ser varias cosas también, incluyendo que a lo mejor algunos estilos del blog estén perjudicando alguna propiedad como el display inline block

      Hay algún link en donde pueda ver el menu? asi seria mas fácil revisar el problema.

  60. Andrez Barrios-Phantomm dice:

    Disculpa deberías De enseñarnos a meterle el contenido a cada factor del menú osea, que tal contenido valla en inicio, el otro en categorías y así y también para los sub menus

  61. Luis Mora dice:

    ¿Cómo hago para que el menú abarque todo lo ancho de la pantalla!? (vi que respondiste en comentarios anteriores, pero no hallo el atributo al que debe cambiarse el valor).

  62. Azolvo Cejes dice:

    Hola, hace poco vi tus tutoriales y son geniales, estoy practicando la creación de menú para una página que estoy diseñando, he copiado el código practicamente igual pero el submenú aparece encaramado sobre el menú de navegación. ¿Cómo podría arreglarlo? Te adjunto una imagen indicandole el error.
    De antemano muchas gracias

  63. Jarley miran dice:

    ohhhhh gracias amigo me ayudo mucho a hacer el menu de mi pagina….. aqui te dejo unas imagenes =D gracias sigue asi hasta le pude agregar un boton en el primer menu

  64. Juan Alejandro García dice:

    oye disculpa ocupo de tu ayuda, tengo problemas con la barra de menú y el slide show, chocan entre ellos y no se muestra primero la barra de menú

    • Mijael166 dice:

      Hola, intenta colocar la propiedad z-index:1000; al selector ul li ul para que la capa quede sobre todo lo demás. Luego me cuentas si eso te funciona, Saludos!

    • Luis BM dice:

      Hola, cómo insertaste la imagen superior en el menú? hay posibilidad de que se repita en todas las páginas? Antes lo hacía con Frames pero daban muchos problemas con las resoluciones en distintos navegadores.
      Gracias

  65. Mijael166 dice:

    Gran Tutorial Carlos Arturo!

  66. Bruno Gelp dice:

    Como seria para poner el menu vertical?

  67. David Campaña dice:

    Hola para poner el menu en la izquierda y al desplegarlo se despliegue a la derecha, como seria?

  68. Jose dice:

    Hola Falcon Master, hay alguna forma de hacer los menus desplegables solo en html

  69. Jesus dice:

    Hola Falcon, me encantaría si me dijeras que tengo que saber para hacer un menú despegable, si, si sigo lo del tutorial pero quiero experimentar un poco mas yo solo, la única razón por la que no lo hago es porque aun no entiendo bien como hacer el menú jaja y pues como sabes jaja uno aprende un poquito mas con experiencia misma, pero pues creo que si necesito saber mas o menos algo para poder hacer este menú y sea de mayor facilidad de dominar para mi.

    ;) y en serio muchas gracias contigo aprendí demasiado, desde mis 12 años (creo) miro algunos de tus vídeos, gracias a ti y pues ahora tengo 16 apenas entrando a la prepa y pues de nuevo, gracias a ti decidí tomar programación para aprender un poquito de javascript jaja lo bueno es que ya entrare con un dominio en este tema :)
    Gracias!

  70. Diego Andres dice:

    como puedo hacer un menú desplegable y pegajoso o sticky menú desplegable??por favor !!

  71. Luis Ruiz dice:

    Yo tengo un problema, bueno el menú aparece bien esta perfecto pero como yo estoy utilizando Macromedia Dreamweaver 8 y estoy utilizando capas para poner la información, el problema es que la capa cubre el menú cuando se despliega y no se como hacer para corregirlo, no se si me podrían ayudar!

  72. Yanett Llanos dice:

    como puedo agregar una informacion a cada una de las barritas de menu me explico digamos que tengo una pestaña que dice politica al darle clic sobre ella me sale la informacion sobre la politica pero sin salirme de esa misma pagina

    • jesus dice:

      se necesitaria un enlace local

      simplemente al elemento html que tiene lo de politica le agregas el identificador politica ejemplo:

      contenido de la seccion de politica

      y el enlace lo haces de la siguiente forma:

      ir a la seccion de politica

      el simbolo «#» es el que indica que se debe desplazar la ventana del navegador hasta la posicion del elemento con el identificador (id) politica

  73. Daniel Perez dice:

    muy bueno el tutorial, pero hay un problemilla a ver si me ayudas, todo sistema tiene diversos tipos de usuario y no todos pueden ver todos los item del menu, como se hace para bloquear un item en especifico, segun el usuario. Por ejemplo el usuario administrador entra a todas las opciones, pero el usuario invitado, solo puede tener acceso a menu de consulta.

    • jesus dice:

      facil si estas con usuarios que tienen niveles de acceso debes tener una referencia a que nivel de acceso tienen, me imagino que debes estar trabajando en php, guarda en una variable de sesion ($_SESSION) el nivel de acceso, ahora si al menu le vamos a incluir un detalle en php para incluir los submenu que solo a el le interesan ejemplo:

      elemento de todos los usuarios
      elemento de todos los usuarios

      elemento para el administrador

  74. Fanny Gil dice:

    Como hago para que cuando el menú se desplegué se vea encima de una caja que esta debajo del menú???

  75. Zulma Rodriguez dice:

    hola! disculpa que te moleste. el tutorial esta muy bueno pero no logro que funcionen los submenus.
    hice un slideshow con tu tutorial y anduvo barbaro y ahora le agrego la botonera pero no me funcionan los submenus. quedan todos juntos en 3 lineas. no se que hice mal…. gracias por tu ayuda!!

  76. Zulma Rodriguez dice:

    hola!! ya encontre que pasaba, habia cerrado
    pero ahora tengo otro problema no puedo centrar el menu
    hice todo (creo obvio) pero sigue en el margen izquierdo grrrrrrrrrrrrr
    no se que mas hacer …

  77. Maricielo Chelito Abarca Cebal dice:

    tengo un problema la barra no me abarca toda la pagina a pesar de que le puse width=100%
    tendria que ver el hecho de que use notepad++?

  78. israel valladares dice:

    hola, tus tutoriales son muy buenos pero me encontré con un detalle. estoy usando una pagina con frame y puse el menú en un frame un poco angosto y al desplegar los submenus se ocultan detrás del frame que se encuentra abajo, no se si existe una forma de que los submenus no respeten el limite del frame y se muestren por encima.

    • jesus dice:

      vas a permanecer con ese problema, ya que el iframe es otra pagina, entonces cuando se despliegue el menu se va a desplegar en el espacio que se ha reservado para esa pagina que estas visualizando en el iframe, este menu tienes que hacerlo necesariamente dentro de la pagina principal

  79. mcc07 dice:

    No me funciona, ya copi’e el codigo igual y ocupa toda la pantalla, no se oculta, pero el demo si

  80. Adilene ♡ dice:

    Yo hice ese menu pero quisiera saber, como le doy accion, por ejemplo en vez de mandarme a un url me mande a una seccion que este en el mismo archivo ya le intente con div pero aun asi no me manda a nada al contrario

    • jesus dice:

      primero que nada debes colocarle un identificador (id) a la seccion de la pagina a la que deseas ir ejemplo contenido de la seccion tambien se lo puedes agregar a un parrafo, a un encabezado, a cualquier elemento html, luego haces lo siguiente con el enlace

      ir a la seccion de deportes

      el simbolo «#» es el que le dice al enlace que se desplace a un elemento con el identificador que sigue despues de él, en este ejemplo seria el elemento con identificador deportes

  81. guiller dice:

    buenas tengo una consulta, porque al crear la de menú me queda el texto a un lado de la misma barra como lo puedo solucionar.
    gracias

  82. patricio dice:

    coomo se pone CONTENIDO en alguna categoría ?

  83. Santiago Herrera Tafur dice:

    http://www.hotelcapital.com.co/ como se hace el menu del link, el menu de abajo que se despliega al bajar ?

  84. cubi dice:

    Como añado otra columna?
    Gracias

  85. Eddy Ruben Juarez Castañaza dice:

    Como puedo hacer para que el mismo menú este disponible para todas las paginas, asi que si yo modifico el archivo de menú este se vea reflejado en todas las paginas.

    • Pedro Cuenca Serrat dice:

      Eddy abre un archivo con extension .php y pones todos los codigos del header y luego pon esto dentro del html, acuerdate de poner la pagina web en extension php
      esto lo pones donde va el menu y asi lo tienes en todas las paginas

  86. Octavio Martinez dice:

    Hola Carlos Arturo tengo una pagina web en la que hay archivos pdf pero estos no se pueden visualizar en dispositivos moviles, mucho agredecere me puedas ayudar. gracias
    (el problema solo es en estos dispositivos)

  87. roberto fernandez dice:

    pregunta si quiero poner para q el menu despegabre al selecsionar una de las opsione me mande a otra pagina como ago por que pongo lo que medeja cambiar de pajina pero me aparese debajo del menu no tiene chiste como lo ago

  88. Matias Guerra dice:

    Saludos falconmasters, desde San juan Argentina. Desde ya muchas gracias por tus aportes , me ha servido muchísimo.
    es esta oportunidad queria consultarte como hacer mi propia tools bar. en la parte inferior de mi web en lo posible en boostrap!!!! :) . Salu2

  89. DanielMaximoff23 dice:

    como le hago para agregar contenido a un enlace del menu??

  90. - L i x i t - dice:

    nop no me sale nada de css en crhome.. solo si pego el cod y lo copio xD, lo hice como el video y solo corrio html..

  91. Johan Vasquez dice:

    Hola Falcon Gusto en saludarte , y muchas gracias por tus tutos en Youtube , me han ayudado mucho ,, tengo este problema , me podrias ayudar o aconcejar

  92. Turpin dice:

    Hola Falcon, muchísimas gracias por el tutorial, es justo lo que estaba buscando y he conseguido crear el menú sin problemas. Pero no puedo insertarlo en mi web, me falta el código head y no lo encuentro por ningún lado. Disculpa si la pregunta es demasiado obvia, muchas gracias.

  93. Luis Terrón dice:

    Hola que tal :D
    Tengo una pagina en desarrollo donde despues de poner el menu desplegable ya no aceptaba un archivo de estilos.css, ayuda :(

    • David Martínez Casado dice:

      Prueba a quitar el link rel=»stylesheet» y todo eso y en el head pon el documento de abajo:

      * {
      margin:0px;
      padding:0px;
      }

      #header {
      margin:auto;
      width:500px;
      font-family:Arial, Helvetica, sans-serif;
      }

      ul, ol {
      list-style:none;
      }

      .nav {
      width:500px; /*Le establecemos un ancho*/
      margin:0 auto; /*Centramos automaticamente*/
      }

      .nav > li {
      float:left;
      }

      .nav li a {
      background-color:#000;
      color:#fff;
      text-decoration:none;
      padding:10px 12px;
      display:block;
      }

      .nav li a:hover {
      background-color:#434343;
      }

      .nav li ul {
      display:none;
      position:absolute;
      min-width:140px;
      }

      .nav li:hover > ul {
      display:block;
      }

      .nav li ul li {
      position:relative;
      }

      .nav li ul li ul {
      right:-140px;
      top:0px;
      }

  94. Juan Carlos dice:

    Hola, buenas noches!! felicidades por las aportaciones que haces, te sigo tambien en Udemy, gracias por los cursos que pones a disposición de nosotros.

    Una duda tengo con este menú, y es que en pantallas Touch como tablet´s o dispositivos móviles no funciona muy bien el menú, ¿hay alguna etiqueta que le pueda agregar para que se pueda desplegar en estos dispositivos?

    Gracias nuevamente.

  95. Sebastián dice:

    Como hacer ese tipo de menú desplegable en adobe reflow???

  96. Alan dice:

    Hola amigo, como podría hacer un menú que al darle clic a una primera opción se despliegue solo esa acción, pero al darle clic a otra opción, la anterior se esconda y así.

  97. Ernesto YT dice:

    Muy Buen video

  98. Alonso David Rocha dice:

    Oye como podria hacer para que de la barra al precionarle me apareciera un div que funcione como un formulario?

  99. Juan David Lasso dice:

    Como puedo hacer el mismo menú desplegable pero vertical?

  100. Keizap78 dice:

    no sé por qué, pero los submenús me salen a la derecha

  101. Rodrigo Martin dice:

    hola, como estas!! te queria preguntar por el tema del icono que aparece en la pestaña que tiene que ser el logo de la pagina y a mi no me aparece nada y eso que ya transforme el archivo a .ico de 16 x 16 px

  102. Cristofer Raymundo dice:

    hola a todos, me pueden decir como le pongo un background-color al submenu?

  103. Mireia Oliver García dice:

    Hola, es un post genial. Sin embargo, me surge este problema: https://uploads.disquscdn.com/images/14531700c90f2ef63b9ed9c2ca04fad38456f5f72b2882d0dba95019b44c8c31.png

    ¿Cómo puedo solucionarlo?

  104. Carlos G Rs dice:

    Deseo que el menu desplegable haga un llamado a una etiqueta por ejemplo en la misma pagina y no a un url, como le hago?. Gracias

  105. Antony dice:

    una duda podria hacer mas ancho el menu desplegable a modo de poner mas columnas en uno mismo

  106. Edgar Hernandez dice:

    Muy bueno, me sirvo, pero me surgio una duda, como hago que para que por ejemplo, tengo un menu solamente de inicio, catalogo y contacto, y que cuando este en la pagina de catalogo, el menu, ese texto que dice «catalogo» se maque con un color distinto al resto, y pase asi con cada uno de los menus??

    *el de la imagen esta echo por una plantilla de wordpress, quiero que salga algo asi* https://uploads.disquscdn.com/images/99b1ff04c4e4045c549143d4944588cb0161257d2d2f139094e32b7b6dcf16be.png

  107. Rose Zu99 dice:

    como separo los enlaces quiero que me salgan separados y horizontales

  108. Josias Diaz dice:

    Hola soy Josias necesito que me ayudes, es por que no me sale mi barra de navegación para mi aplicación web

  109. javier sanchez dice:

    una pregunta tengo un slide y no salen los sub menus completamente, se quedan detras de el slide, como puedo hacer para que salgan frente a el? agradezco su respuesta y aporte.

  110. Louis Ricalde dice:

    como puede poner la tabla centrada, no me deja, gracias :)

  111. Saile Asesan dice:

    hola le puse el menu pero cuando pongo contenido me aparece arriba
    con el menu como puedo arreglar esto o como dividir contenido del menu

  112. Luis MP dice:

    hola yo agregue 8 campos pero tres me los pone abajo y quiero que queden todos en un renglon

Deja una respuesta

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


Aprende con nuestros cursos

React y Firebase: El Curso Completo, Práctico y desde Cero

React y Firebase: Curso Completo, Práctico y desde Cero

En este curso aprenderás React desde lo mas básico y paso por paso hasta un nivel avanzado donde podrás crear sitios y aplicaciones web reales.

Inicia el curso

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 5: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso