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

[@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😂

[@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!!!!

[@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!.

[@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

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

[@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 :)

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

[@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 🤓

[@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

[@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

[@Diego14788]

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

[@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 :(

[@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!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

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

[@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!!

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

[@elvacioxd8517]

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

[@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

[@chrystianrodrigoguerramora4272]

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

[@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

[@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!

[@cahetdublin]

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

[@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!

[@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

[@ElKpu]

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

[@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

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

[@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

[@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

[@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

[@christopheralexishernandez9245]

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

[@tokiohotel255]

Gracias Hermano te debo mi calificacion final XDD

[@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

[@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

[@jhonalvarez1930]

Este tipo de videos salvan cursos

[@GoldFishingOrg]

Que si no

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

[@raquelvazquez4259]

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

[@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!

[@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

[@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ó :)

[@valentinarojasr8641]

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

[@a1000carajo]

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

[@WilmarCuesta]

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

[@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 ❤️🥺🥺

[@_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

[@hernanfloresramirez3163]

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

[@hernanfloresramirez3163]

Un merecido Like (Y)

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

[@miguspokk]

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

[@johncaballero8430]

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

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

[@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

[@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

[@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

[@MXNO3510]

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

[@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

[@mr.holmes4041]

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

[@-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?

[@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

[@MarcoChavez1940]

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

[@marcoschivico8523]

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

[@Animemarkotaku]

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

[@francovillafania74]

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

[@davidbronson4311]

No se preocupen por la mas o menos antiguedad del video porque todo lo que dice es igual lo unico que hay algunos cambios lo unico que es para facilitar el trabajo.

[@elliotowasp4077]

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

[@enriquesg8820]

Muy bien explicado, de forma clara y sencilla. Gracias.

[@mcyupo4447]

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

[@Andressaso-pd7nh]

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

[@jhoncastillo3570]

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

[@oscarcastanedamaravillo4279]

12 años después

[@caballeroayalaariel1570]

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

[@alangarcilazo3367]

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

[@evelynvaleriaagapitocaycho3299]

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

[@yesidcavilap2001]

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

[@longanizaawada8054]

Necesito ayuda en el minuto 10:50, cuando se supone que deben desaparecer los submenús, el de servicios me aparece un poco abajo, como si estuviera salido. Y ya revisé todo el código y no encuentro falla. Alguien ayuda!

[@HenryGamingYT19]

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

[@d-landjs]

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

[@joseninaocros7405]

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

[@PetaCripto]

Hola! Una pregunta: ¿Porque cuando hace position:absolute en el minuto 11:23 el submenu no se va al borde superior izquierdo de la pagina? Ya que todos los contenedores son estaticos. Y tampoco le da valores top y left. Un saludo

[@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 :)

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

[@rodcastillosuarez8291]

BRUTAL BRO!! ME SIRVIÓ DE LUJO GRACIAS

[@martinvision.predicas]

Amigo buenas tardes, muchisimas gracias por este y todos los tutoriales que realizas para ayudarnos a los que estamos integrandonos a este mundo de la web.. +10 !

[@rocioaguilera6448]

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

[@andruxbmx2647]

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

[@julioalbertopastorcuba6499]

muy lindo tuto y muy entretenido fácil de hacer saludos desde Paraguay

[@jaza5350]

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

[@nordjars6903]

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

[@daeldelacruz2664]

a mí me funcionó de maravilla gracias por tus explicaciones

[@macs1701]

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

[@TheSebastianSantis]

Excelente tutorial, muy rápido, bastante claro y muy funcional :)

[@rpgsempay7251]

2022 Y ESTE VIDEO SIGUE SIENDO EL MEJOR, LETSGO

[@DanielBallester21]

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

[@oscarperez4006]

Excelente TUTORIAL en Verdad explicas al 100% y Funciona....Gracias Men sigue asi....¡¡¡¡