Como hacer un menú desplegable con HTML y CSS

[@morita360]

Llevo días llorando porque no entendía otros videos que explicaban esto mismo hasta que llegué aquí! GRACIAS

[@aurear.r]

Muchísimas gracias. Es alucinante que haya personas que dediquen su tiempo a enseñar sin pedir nada a cambio. Estoy empezando a aprender html y css y tu lo haces muy fácil de comprender ya que dices para que sirve cada cosa en todo momento. Muchas gracias, de verdad!!!!

[@tawa5117]

9 años después, me has salvado la vida.

[@GabyBracamonte]

x2 😅

[@Guzman_J94]

10 años 🤡

[@azulliendo8866]

Tengo una pregunta puse style type pero agrego padding pero no lo reconoce en el head sera la version de mi visual o que ?

[@JonathanDj23s]

@@Guzman_J94 11 años pa

[@fugitivocodm]

@@Guzman_J9411😂

[@galletasporsiempre6931]

2012 el vídeo y aun funciona excelente en nuevas interfaces, muy bien, tome su like buen hombre.

[@davidchihuan]

Gracias chicos!! son lo maximo!! resulto, me siento emocionado de poder estar haciendo mi propia web desde cero. Cuando tenga el resultado final ya publicado, espero que ustedes enten entre los primeros en visitarla!! Dios, que alegria!!

[@ezequielcuello8666]

¿Y cómo te fue con tu página?

[@rikudoupain224]

Vi tu vídeo en tu página y vine hasta aquí para agradecerte, me funcionó, GRACIAS!.

[@freemusicnocopyright1222]

EL CÓDIGO PARA LOS QUE NO QUIEREN ESCRIBIR menu desplegable *{ padding:0px; margin:0px; } #header{ margin:auto; width: 500px; font-family: arial, helvetica, sans-serif; } ul,ol{ list-style: none; } .nav li a{ background-color:#000; color: #fff; text-decoration: none; padding: 10px 15px; display: block; } .nav li a:hover { background-color: #434343; } .nav > li { float:left; } .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 productos animales animales animales animales animales animales animales animales animales animales animales animales animales animales servicio animales animales animales animales animales animales animales animales ubicacion info

[@marianelaz5491]

sos un grande no te conozco y ya te amo

[@Jenvff]

algunos heroes van sin capa xD

[@jarolcastro1654]

Gx broo❤❤

[@eduardojosegarcia258]

Gracias

[@an_bun6970]

Ídolo 👋. Gracias

[@arielpombo]

recomiendo no olvidar agregar # al link que corresponde a los menues desplegables, ya que vaciio hace que el menú no pueda desplegarse cuando usamos pantalla tactil, como celulares y tablets. Un detalle pequeño, pero super importante. Excelente el tutorial. Muy facil y muy bien explicado.

[@strahm33]

Muchas gracias Carlos!!! Ya vi los tutoriales de css y html y explicas extremadamente bien, te entiendo mas a ti que a mi profesora de diseño web de la universidad xD Gracias por compartir tus conocimientos con nosotros,ahora empezaré con bootstrap :D Saludos desde Colombia :)

[@missigno5138]

Hola, sé que lleva años que ese vídeo de suplicó, pero sólo quiero agradecerte por el mismo, me ayudaste bastante en lo que hago mi proyecto, muchas gracias.

[@FalconMasters]

Notepad++ es muy bueno, yo lo usaba mucho antes, ahora uso sublime text, realmente es cuestión de gustos.

[@SrICosmic]

Prefiero Visual Studio Cod. Pero es cuestión de gustos

[@eribertmarquez452]

@@SrICosmic El comentario es de hace 7 años en ese entonces el rey era sublime

[@MelkinIbarra]

Brother, usted conoce, me salvó la tanda, ocupaba un menú sencillo y funcional par añadir a salto de resolución con media queries para 480px de ancho, esto me va de lujo, mil gracias... saludos desde C.R

[@TATU22XT]

Muy bueno, claro y simple, me ayudo de mucho. Mil Gracias.

[@diegoapestegui6489]

Que copado de facil !

[@marianodoors]

@@diegoapestegui6489 QUE HACES ACA PROFEEEEEE??? jajaja aca haciendo una paginita yo

[@diegoapestegui6489]

@@marianodoors aprendiendo, ñoñando 🤓

[@elvacioxd8517]

si lees esto dejame agradecerte, gracias a este video aprendí mas q en 6 horas de clase, ademas salvaste mi proyecto de grado.

[@FalconMasters]

@Léo Leblanc Para eso puedes utilizar en vez de background-color usar un background:url(direccion te tu imagen);

[@tutorialesya01]

Con css sale (y) ... pero con bloc de notas solo se queda hasta un punto .nav li:hover>ul{ display:block; cuando pasas el mouse por encima no aparece nada :/ ... pero en css si sale... u.u dime se con BLOC de notas usted puede hacerlo .. Gracias ... :)

[@luiyiihdez3137]

Ricc anyms creo que te falto poner despues de li la "a" (la etiqueta link)... consejo, utiliza notepad ++ en vez de bloc de notas =3

[@lucho6675]

Ricc anyms como uso dreamwever pero no aparece el hover :S tal y como dices .. que hiciste?

[@jasielmillanvillarreal376]

Ricc anyms Lo hice, pero me presenta el mismo problema, alguna sugerencia que tengas? es necesario utilizar notepad ++ ? si es asi, donde lo descargo?

[@carloscastro3139]

amigo como hago para centrar el menú ? me queda un poco hacia la izquierda :(

[@Diego14788]

Excelente trabajo, me sirvió muchísimo, tiene mas de 10 años y funciona a la perfección, muchas gracias!

[@richarmp29]

Falcon, es lo mismo colocar ="nav"> que colocar submenu ?¿

[@DJXhiko2011]

me parece que si

[@frankh.1680]

En html5 para el menu de navegacion solo se usa en versiones anteriores era con "class" pero si es lo mismo.

[@chrystianrodrigoguerramora4272]

he visto un sin fin de tutoriales para esto y este fue el único que pude adaptar a mi página

[@cahetdublin]

Thanks Dude, you saved me... your tutorial is great!, even to understand as only speak BrPortuguese.

[@llllgoplayllll4946]

WooooooooooooOoOwW El unico que me a servido de aproximadamente 10 vídeos que eh visto. Gracias,ya eh aprendido mucho de ti,ya estoy armando mi propia pagina con mi propio estilo. Lo unico que no tengo es hosting,y no tengo la opción de pagar por cuestiones personales. El que me diga como puedo poner un hosting y dominio gratis yo podria ayudarlo con lo basico para crear su propia pagina web. GRACIAS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@emiliodelacruznavarro2691]

Amigo tengo un problema al poner el float left que no lo lee P.D. lo estoy haciendo en bloc de notas

[@sarasofia5095]

Fijate bien, pues yo tambien lo estoy haciendo en bloc de notas y si lo leyo.

[@LigiaCeballos]

el bloc de notas no importa, mientras el formato del archivo sea el mismo no afecta P.D. Tambien prefieron programar en bloc de notas xp

[@miglopiutub]

y yo en paint :v, ok no, no se crean eso

[@christopheralexishernandez9245]

Me salvaste bro, 9 años después sigue sirviendo tu video :)

[@andreaespinoza4717]

No me salio el menu desplegable le coloque .nav li:hover > ul{ display: block; } y no me dio aparecen los submenu

[@user-wm2lj7qp2r]

a mi también me pasa lo mismo aún que llego 4 años tarde xd

[@kiover9828]

@@user-wm2lj7qp2r igual no sale el submenu

[@andresinalbis6651]

Después de cinco años está muy bueno el tutorial y....funciona perfectamente. Estoy en los primeros pasos de html, no lo entendí todo, pero aprendí mucho. Es cuestión de asimilar las instrucciones, familiarizarse. El código html lo tengo guardado y lo voy a seguir mejorando, tengo algunas ideas....MUCHAS GRACIAS

[@tokiohotel255]

Gracias Hermano te debo mi calificacion final XDD

[@ElKpu]

NAH CHABON SOS EL MAS GROSO , este es el mejor tuto que he visto hasta ahora

[@melissadl2108]

la parte: .nav > li { float:left; } no me quiere funcionar, el menu se queda en columna siempre y no en fila. Me puedes ayudar?

[@kasitoo]

igual me pasa

[@brayanfalcon8029]

ya somos 3

[@robespierretrivino1286]

El error es que probablemente estén dandole estilos a la class en css (.nav) y en el html esten usando solo la etiqueta

[@strangersword4448]

yo igual... =(

[@isaimora537]

me pasa lo mismo cuando pone .nav

[@gusfedeniccolo9902]

Vengo un poco atrasado (años) mirando estos videos jeje ... excelente trabajo maestro!! Muy agradecido por esta generosa transferencia de conocimientos.

[@victorcedeno6929]

Carlos como hago para que mi menu ocupe un 100% del ancho de la pagina o de la capa??

[@FalconMasters]

Victor Cedeño Le tienes que cambiar el width de 960px a 100%

[@manitoher3368]

***** lograron poner que todo el menu cubra la pantalla? Necesito eso para mi proyecto de pagina web !HELP ME¡

[@alex32tutoriales38]

***** es en el header :v

[@manitoher3368]

uff hasta ahora responde :c ya pa que igual no pude encontrar como hacer full el menu y saque una A en el proyecto xD

[@manitoher3368]

concuerdo con tu opinion mas vale el conocimiento que el diploma que vayas a enmarcar...bueno si pregunte y investigue pero bueno en este caso no encontre solucion a mi duda pero ya si aprendi a hacer menus

[@luisortiz6018]

Epa carlitos en este si se mandó, me quedó muy bien le voy a cambiar los colore y lo voy a poner coqueto.Muchas gracias por tu paciencia y que sabes enseñar gracias nuevamente un abrazo LuisOrtiz desde Venezuela

[@gonzalobustamante1456]

Hola, a mi porque no me salen los primeros elementos en horizontal? Si se me permite pego el codigo html: Enlace 1 Enlace 2 Enlace 2.1 Enlace 2.2 Enlace 3.3 Enlace 3 Enlace 4

[@ramirogonzalez7589]

Me acaba de funcionar perfectamente, tiene muchos años el video pero sigue siendo muy util, tome su merecido like y suscribe buen hombre.

[@FalconMasters]

Gracias!

[@FalconMasters]

♦ Curso de PHP y MYSQL: Completo, Práctico y desde Cero www.tutorialdephp.com

[@AlejandroAyalaWorld]

Ya se venció la oferta :( Si tan solo hubiese visto antes

[@FalconMasters]

Ahorita mismo hay una: www.udemy.com/php-y-mysql/?couponCode=OCT-15 Termina en este mes

[@AlejandroAyalaWorld]

Muchas gracias, pero no tengo tarjeta de crédito, pensaba pagarlo en un agente

[@Margaretbeard_]

Hola! me gustaría saber como puedo alargarlo para los lados, por favor!.

[@franklibergeorgeguzmanvill703]

Amigo tengo un problema, el menú sirve pero cuando abajo de el encabezado donde va el menú agrego otro div los submenus se cierran.

[@polgonzalo5978]

Realmente cuando veo un tutorial me da mucha pereza dar like, pero he de admitir que con este lo he entendido todo a la perfección y me ha ayudado mucho, a si que he iniciado sesión tan solo para darte like. Te lo mereces, está muy bien hecho!

[@FalconMasters]

Muchas gracias!

[@colombianflower7465]

:( hola, muy bueno el tutorial, bueno he hecho todo como lo hiciste, pero trabjè sobre una parte del HTML que ya habia empezado que no era mucho y no me sale el menu asi, sino que me salen regado, no se despliegan hacia abajo. Estarè buscando cual es el error, pro que me pasa ese desorden en el menu. Gracias muy bueno !

[@joelacoltzi4732]

lo encontraste el error ??

[@chocogalletaa]

este error de hace 7 anios me perturba, ojala hayas encontrado la solucion

[@charlydragon3108]

GRACIAAAS al fin encontré un turial que solo trate de un lenguaje, tengo que hacer 5 páginas web de tareas con esos menús :'), me facilitarás un poco más la tarea gracias, NUEVO sub ❤️🥺🥺

[@cristinadiazsuero2970]

Hola , Falcon ,en la parte : nav > li { float:left; no se me pone los nombre inicio ,servicio... en linea no se me acomoda y por consiguiente esta todo en bloque. ¿que puedo hacer?, gracias.

[@laabuela00]

solucionaste? A veces hay que revisar bien el código por que por una letra o un espacio mal colocado no reconoce el código.

[@carlomagnocondesaldana5860]

me sucede lo mismo.. llegaste a arreglarlo?

[@didierhernandojimenezduart1078]

igualmente que pudo pasar lo necesito urgente gracias

[@josefranco1078]

Gracias amigo, soy nuevo en el desarrollo web y estoy haciendo una web como proyecto de front-end y la verdad no tenía ni idea de como hacer un menú desplegable. Sin embargo yo ya tenía hecha mi barra de navegación por lo que no quería rehacerla así que tuve que adaptarla en base a lo que explicaste y me funcionó :)

[@jairotibasosaarevalo5747]

creo que te amo, me gustan las mujeres pero eres l mejor explicando asi que te amo xD

[@santiagoromero.1989]

solo por comentar, en la no es necesario una etiqueta de cierre.

[@romerosantosdos17]

no me sale y eso que lo hice con notepad ++ cuando pongo **.nav > li{ float;left; }** me desforma todo que hagoo

[@romerosantosdos17]

ya lo solucione XD

[@raquelvazquez4259]

romero santos dos Me puedes decir como?tengo el mismo probema

[@martinezmaciasrosaangelica3662]

romero santos dos ayuda , tengo el mismo problemaporfavor

[@raquelvazquez4259]

Yo tambien lo soluciones pero no me acuerdo como creo que tenia un error al cerrar :s

[@jasonhernandez7454]

Raquelml Vazquez en #header{ width: aumenta los pixeles

[@_huerta_1201]

9 años despues y gracias a este video me sirvio en mi proyecto de mi carrera de Prepa (T.I.); Gracias Broo

[@raquelvazquez4259]

.nav > li { float: left; } Al llegar a esta parte no cambia nada :'( Me puedes ayudar por favor :)

[@a1000carajo]

Me sirvió mucho para mi trabajo final, saludos desde argentina.

[@gloriapaulinaprezent6090]

muchísimas gracias por tu tutoria, este vídeo me ayudo como no tienes idea, procurare seguir viéndolos y aprendiendo de ellos, éxito en tu canal.

[@dumpbass]

compi eres un genio, me ayudaste mucho con un submenu que no se me desplegaba, muchas gracias por el video y muy bien explicado!

[@androidfans9043]

gracias hermano de verdad que eres de ayuda, he tratado con varios tutoriales y plantillas y no me funcionaban en visual studio, y con tu ayuda he podido hacer el menu que necesito y variar a mi gusto mil gracias bro por tu aporte.

[@Brian-ju4fs]

Brother muchisimas gracias, Siempre e visto tu canal y cada cosa que enseñas lo haces con claridad y pasión, TE FELICITO!!

[@sandycordovavilchis4528]

chico con todo respeto dejame decirte que eres una chingonada! me salvaste muy bien explicas super bien, claro y consiso! Gracias!

[@FalconMasters]

Sandy Cordova Vilchis Genial, me alegra que te haya servido mi video :D

[@alefe4]

Si es muy sencillo de hacerlo pero eso no es lo importante, lo importante es quien explica y como lo hace, tú lo hiciste a la perfección.

[@andresvelasquez3581]

Excelente!!!!!! Gracias amigo no sabes del aprieto del que me acabas de sacar, eres todo un experto, gracias a ti me empezo a gustar esto de hacer paginas web, te lo agradezco y sigue asi!! :D

[@MXNO3510]

muchas gracias por el video... me ayudo mucho ahora que estoy en pleno curso de diseño páginas web....

[@miguspokk]

PORQUE NO VI ESTE VIDEO ANTES!!!!! muchas gracias

[@MarcoChavez1940]

Muchas gracias amigo, esto me ha resultado mucho mas facil para hacer mi pagina jajajaja, te lo agradesco, excelente aportacion!!!. Saludos

[@darkogamesxd9237]

gracias compañero, tu explicación es maravillosa, esta buscando la forma de darle mejores estilos a mis paginas web, ya que pues programo en html5 Css y java script, y con esto me das mas herramientas, muchas gracias bro

[@joseninaocros7405]

10 años después, y aún siguen utilizando este video como ejemplo en donde estudio. Bueno video

[@mcyupo4447]

FalconMastersVermo ya me estava encabronando no conseguia esto en espesifico te mereces un like y me subcribo "GRACIAS MEN" uff....

[@Animemarkotaku]

Se rifaron en el Css son unos dioses en esto del html jejeje saludos y gracias por ello!! Excelente aporte!!

[@valentinarojasr8641]

Gracias. Muy bien explicado y eres un gran comunicador. Muchas gracias. Suerte y éxitos.

[@KiM17PC]

me sirvio. para los que no se les desplego, la solucion que yo utilice fue, hacerlo en una plantilla en blanco y cuando el producto estuviera terminado pegarlo en la plantilla ya creada. a ver que efectos tenia.

[@WilmarCuesta]

Carlo era lo que estaba tratando de aprender...gracias muy bueno...continuo con el otro avanzado...

[@jhonalvarez1930]

Este tipo de videos salvan cursos

[@GoldFishingOrg]

Que si no

[@rulason87]

like y suscrito!! Me has ayudado mucho. eso si, yo he hecho el menú en horizontal. Me ha bastado con no escribir float:left; y después ir jugando con los px. Muchísimas gracias. Un saludo desde Madrid

[@Gabysensou]

me funciono de maravilla , mi pagina tiene ahora un lindo menu desplegable , gracias

[@irvinga.sifuentesp.5609]

Excelente video, semcillo y concreto, trabajo con AS400 pantalla verde y estoy aprendiendo, y este video esta perfecto para aprender, el manejo de menu, gracias, tendras un video de como diseñar la pagina principal, masterpage.

[@samuelsantisteban]

Te felicito, muy buena implementación, es interesante saber porque vas poniendo .nav li ul li, osea por que va la secuencia y también .nav li a: hover. nuevamente excelente. Gracias.

[@danicc2596]

como hago para hacer el menú de forma que se abran los submenus pero solo si les doy click al ???

[@yesidcavilap2001]

Da pai me acabas de salvar de 6 en informatica eres lo mejor.

[@alangarcilazo3367]

Gracias por la info, despues de casi 10 años, like + subscripcion!

[@mr.holmes4041]

Qué buena manera de explicar, ya entiendo mucho mejor los códigos, excelente video. Me suscribo

[@andruxbmx2647]

perfecto ando en una entrega de trabajo final de la Universidad y me ha salido de la ostia

[@johncaballero8430]

9 años despues y todavia funciona... excelente y gracias

[@nordjars6903]

10 años después , me has salvado la vida

[@Anqas5]

wow me salvaste lo hice en bloc de notas, te segui los pasos y no me salia pero despues fui a tu pagina donde esta escrito el codigo y me di cuenta que me equivoque al escribirlo y por eso no salia. te pasaste gracias!

[@FalconMasters]

Si, normalmente siempre suele ser un error mínimo de código, que bien que te haya resultado :)

[@HenryGamingYT19]

El video es de hace 6 años pero igual me ha servido, gracias! ♥

[@hernanfloresramirez3163]

Sos un capo, lo entendi a la perfección segui adelante

[@hernanfloresramirez3163]

Un merecido Like (Y)

[@oscarcastanedamaravillo4279]

12 años después

[@faiverbravo5859]

Gracias por compartir este vídeo ya que es de mucha ayuda para estudiantes como yo que me encanta este tema. felicidades desde Colombia

[@mistralvideo]

Excelente aportación muchas gracias. Ahora necesito crear los hipervículos. Un saludo

[@marcodeatroyer]

Muchas gracias por el tuto papu, 12 años y aún haciendo historia ❤🥵

[@elliotowasp4077]

Muchísimas gracias por ese tutorial. Lo explicaste de maravilla!!!!! Entendí mucho. De verdad, muchas gracias!!!!!!

[@fran270886]

hola falconmaster...solo queria agradecer por los videos, estan realmente muy buenos...bien explicados pero al grano. Ya vi los de Css y los de esta lista y aprendi demasiado para poder terminar una pagina q estaba diseñando...sigue adelant saludos desd Costa Rica

[@DanielBallester21]

2021 no me funcionaba el menú desplegable de WP y lo solucione con esas lineas de CSS!! GRACIAAAAAS!!!

[@NchoFlm]

Muchas gracias por el tutorial, justo necesitaba crear submenus con css jaja

[@Andressaso-pd7nh]

aun después de tantos años y sigue siendo muy útil

[@macs1701]

Convertir las a en bloque darles padding razonable, y flotar los nav>li

[@-Fjolnir-]

D: gran video, pero en la parte de ".nav > li" cuando uso el float left no se me acomodan, tal vez sea por mi visual studio?

[@marcoschivico8523]

Muchisimas gracias hermano. un aporte de gran ayuda. saludos desde venezuela

[@jaza5350]

Oye crack, buenas noches, no sé si leas mi mensaje, pero muchísimas gracias, me sirvió demasiado!!💚

[@caballeroayalaariel1570]

Gran video hermano, me salvaste de un problema, te agradezco por la buena explicacion de tu video

[@francovillafania74]

me ah encantado tu video sigue subiendo videos asi. me sirvio mucho. eres lo maximo explicando Gracias

[@evelynvaleriaagapitocaycho3299]

Muy buen video acerca del menú desplegable falconmasters 👏👌❤️

[@dissapointedpancake1449]

Tantos años y aunque ya hay mejores formas de hacer algunas cosas, sigue siendo revisitable

[@jhoncastillo3570]

Hombre, quedo eternamente agradecido por tu trabajo, muy bueno y de calidad gracias

[@Zerolagg]

Traté de replicarlo en Yii pero los submenus del primer , que serían, si entendí bien, los se despliegan hacia la derecha en lugar de hacia abajo. Que puede ser que esté fallando?

[@flussen0]

Y pensar que con este video empecé a programar, hace tanto tiempo...

[@rpgsempay7251]

2022 Y ESTE VIDEO SIGUE SIENDO EL MEJOR, LETSGO

[@d-landjs]

Excelente tutorial Arturo!!! No habia visto tus videos antiguos, una buena base para aprender mas menus sotisficados!

[@rocioaguilera6448]

Muy bueno la verdad, muy claro y las visualizaciones gráficas del paso a paso ayudan mucho :D gracias.

[@AlfredoNoguezR]

super excelente tutorial me ha servido de maravilla gracias de verdad le entendí y lo pude hacer a la perfección deje mi like y me he suscrito a tu canal, saludos a todos.