How to Create an HTML Dropdown Menu | Learn HTML and CSS | HTML Tutorial | HTML for Beginners

How to Create an HTML Dropdown Menu | Learn HTML and CSS | HTML Tutorial | HTML for Beginners. In this lesson we will learn how to create an HTML drop down menu. A drop down menu is easy to create, and in this lesson I will go over everything including the styling of the menu. The actual drop down effect starts at 18:56 in the video.
➤ GET ACCESS TO MY LESSON MATERIAL HERE!
First of all, thank you for all the support you have given me!
I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!
I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach.
I hope you will find it helpful :)
Material for this lesson: / lesson-material-42361704

Пікірлер: 547

  • @Dani_Krossing
    @Dani_Krossing Жыл бұрын

    NEW UPDATED 2023 COURSE AVAILABLE! 🙂 You can find it here: kzread.info/dash/bejne/qGyeptB7icaWktY.html&ab_channel=DaniKrossing

  • @cruzinsweetsntreats

    @cruzinsweetsntreats

    Жыл бұрын

    Though Lesson 12 of the updated course for 2023, *does not* include a sub-menu, as you brought out here. 🤔 04-28-2023 0400 PT

  • @VipUaenaMoomoo

    @VipUaenaMoomoo

    3 ай бұрын

    Hi, How to create new page inside one of the dropdown menu button to display the text/content of the page. I don't know how and what to do..

  • @keithwilson5229
    @keithwilson52294 жыл бұрын

    the reason you have so many subscribers is: not only are you an awesome instructor BUT you also make your screen big enough to SEE what you're doing; even on a mobile device... other programmer instructors please take notice...!!! Excellent video!!!!

  • @bapynshngain
    @bapynshngain3 жыл бұрын

    There's a lot of "tutorial videos" out here but none explains as clearly as this guy. Thanks a lot man

  • @baragydurugy9084
    @baragydurugy90845 жыл бұрын

    I can't find a good and clear tutorial about HTML dropdown and I only got a 2 days deadline before I pass my project. Man you actually saved me from my grade 11 thesis thanks a lot, keep it up.

  • @pocketsquareformat
    @pocketsquareformat6 жыл бұрын

    This is a great tutorial! I appreciate you taking the time to clearly explain things step-by-step. Cheers

  • @julianthegreat4995
    @julianthegreat49954 жыл бұрын

    When you need to search on youtube because your college teacher want you to do a site that uses it even though he never really told you how things even work.

  • @adriangarcia9828

    @adriangarcia9828

    4 жыл бұрын

    Welcome to school soldier

  • @arewenot

    @arewenot

    4 жыл бұрын

    that's basically how college works

  • @orlandorojasmoncada9110

    @orlandorojasmoncada9110

    4 жыл бұрын

    that's basically how programming works

  • @celticpanda1494

    @celticpanda1494

    4 жыл бұрын

    When you've been there and done that already and are instead doing independent study, except now you don't have to pay for someone else to tell you to look it up. x)

  • @roysmith6054

    @roysmith6054

    4 жыл бұрын

    @@celticpanda1494 Same

  • @johnonguka6079
    @johnonguka60792 жыл бұрын

    many have been called for the teaching but few have been chosen to give out the real content as far as online tutorial is concerned, THANK YOU SIR DANI

  • @truths33ker29
    @truths33ker295 жыл бұрын

    thank you so much brother, im just teaching myself html5, css and stuff and this was really confusing me till i watched this video your an absolute legend.

  • @Hamad-of1gc
    @Hamad-of1gc5 жыл бұрын

    I cannot thank you enough, this thing helped me get extra points on my project. No one in my class did this. thank alot!

  • @amazingworld4351

    @amazingworld4351

    4 жыл бұрын

    Brother kindly contact me

  • @bryanzofficialtv5979
    @bryanzofficialtv59796 жыл бұрын

    omg thanks you for this video. i was worried about the dropdown menu thank you very much.

  • @nozrulchoudhury523
    @nozrulchoudhury5235 жыл бұрын

    Thank you very much for the thorough, concise and working tutorial! After watching about 9 other videos that quite didint work for some reason, everything in yours did! Thank you again!

  • @jamesmclean5790
    @jamesmclean57902 жыл бұрын

    Thank you for the walkthrough. It was what I needed to complete a rather extensive dropdown menu.

  • @lobzangchamba8197
    @lobzangchamba81974 жыл бұрын

    This is the best, the most instructive, and simplest tutorial after searching online this kind ones!

  • @brianbarber9720
    @brianbarber97204 жыл бұрын

    Thank you so much for doing this tutorial! It by far was the easiest to follow and I'm very happy to say, I am able to get the exact results I was looking for.

  • @aprilformosa
    @aprilformosa5 жыл бұрын

    I've been struggling with the dropdown menu for days. You make it so easy to understand! Thank you very much! Really appreciate it!

  • @june-nz8hz

    @june-nz8hz

    5 жыл бұрын

    Hi, mine does not work... can you send me your code to my email i compare?

  • @janasokolovic2496

    @janasokolovic2496

    3 жыл бұрын

    @@june-nz8hz hey ahahahahah is there any way that u still have that code?

  • @cruzinsweetsntreats

    @cruzinsweetsntreats

    Жыл бұрын

    @@janasokolovic2496 he likely does, in a shared Google Drive folder, that is made available by subscribing to his Patreon account, or now "joining" his KZread Channel.

  • @MillennialJesus
    @MillennialJesus6 жыл бұрын

    thanks : ) out of all the last tutorial I have watched yours is the simplest

  • @user-wl7yb4zb8p
    @user-wl7yb4zb8p4 жыл бұрын

    Great tutorial. Many thanks. What worked better for me, though, was giving 'position: relative' to 'nav ul' instead of 'nav ul li'. It helped me with positioning the drop down part of the navbar which has 'position: absolute'.

  • @saitenwurstchen8072
    @saitenwurstchen80725 жыл бұрын

    This is really helpful. Thank you so much for yet another awesome tutorial!

  • @wegallagher
    @wegallagher6 жыл бұрын

    Thanks! I will be adding links to your playlist on my website!

  • @jahongirtolqinboyev4021

    @jahongirtolqinboyev4021

    2 жыл бұрын

    So do I

  • @BalkanDrifters
    @BalkanDrifters4 жыл бұрын

    Thank you a lot man! I have been struggling to do it myself, and as I am still inexperienced, I used bunch of divs and id's and whatnot, and it was a complete mess when I have tried achieving hover effect correctly. Your video has shown me parent->child relationship pretty clearly and simple and now I have completed my task for college successfully and I feel so happy now! c:

  • @chrumczyk5494
    @chrumczyk5494 Жыл бұрын

    Great tutorial. For me it's the best on youtube and I've seen a lot of those drop down menus. This one is straight forward, simple and clean code.

  • @LVusaAPI
    @LVusaAPI Жыл бұрын

    Amazing - i have seen folks doing it with tons of html class , buttons, js efc. You came here without all this mess and knock it out beautifully

  • @vrcxmeta4598
    @vrcxmeta45985 жыл бұрын

    now i can expand my little knowledge about coding html, thanks!

  • @ferideva_art
    @ferideva_art3 жыл бұрын

    This was exactly what I was looking for! Huge thanks to you!!!

  • @patrickquinlan4394
    @patrickquinlan43945 жыл бұрын

    for some reason when i try to make a dropdown without have a tag in the nav it wont work

  • @wilrockcreates
    @wilrockcreates4 жыл бұрын

    This helped a ton in getting the results I desired! Great tutorial!

  • @sdftrd
    @sdftrd5 жыл бұрын

    Awesome tutorial! So easy to follow and understand. Many thanks!

  • @waltwilliams6012
    @waltwilliams60122 жыл бұрын

    Thank You!! Excellent tutorial on this topic. I had already muddled through and created one with information I gleaned from several web sights. Yours much more logically put together and aligns much nicer than mine. I had to use negative px padding in spots to get mine to line up correctly. I successfully played with "transition: all 500ms ease;" in the "nav ul li" and "nav ul li a" styles to soften the movement of the mouse along the menu. Setting the height in the main to 'auto' will auto adjust the nav height should the browser window get scrunched in the Y-direction.

  • @believeingodalways
    @believeingodalways2 жыл бұрын

    I have seen around 10 diff top listed videos And yours is the best now I dont need to watch anyone else’s video to understand styling drop down menus Best teaching skills

  • @samuelravikanth830
    @samuelravikanth8302 жыл бұрын

    Thank you so much. I tried so many other channels and what they show doesnt work but yours does.

  • @dianapinto3779
    @dianapinto3779 Жыл бұрын

    You're amazing thank you, I really like how you explain how the whole HTML and CSS work while building the drop-down menu and the reason why you've added those values. Cheers

  • @kevinh9741
    @kevinh97413 жыл бұрын

    Im learning to code a website and this was super helpful, a great walkthrough with tons of info but it will just take time to learn it all. Thanks a ton!

  • @mannyd9216
    @mannyd92165 жыл бұрын

    Thank you!! Very easy to follow and I have created an amazing Dropdown Menu.

  • @philiposztromok5601
    @philiposztromok56013 жыл бұрын

    Really good, easy-to-follow video and it teaches you exactly what it says it will so very practical. Thanks for posting it!

  • @esimm595
    @esimm5954 жыл бұрын

    Really Glad I can do this! Thanks! One thing though, a slightly lighter background image would make it easier to see the black letters in the dropdown menu before they get a white dropdown background.

  • @cynthiamanor6565
    @cynthiamanor65654 жыл бұрын

    This was a lifesaver! You explained everything so clearly! Thank you!!

  • @jtc9098
    @jtc909810 ай бұрын

    Another great video I found! When I’m really struggling with a project, you are my go to guy. I love your channel.

  • @efraimgalindez1457
    @efraimgalindez1457Ай бұрын

    Thank you for your precise and concise directions. Extremely helpful in helping me understand drop downs. Thank you.

  • @unholygrail4676
    @unholygrail46764 жыл бұрын

    You just saved my mid-term grade. Kudos to you my good sir.

  • @MyNegativeCreep
    @MyNegativeCreep4 жыл бұрын

    How can I add a logo instead of a text in the line above the ? I want to do this with CSS as background in the top left corner but somehow it does not work.

  • @juuhachigo
    @juuhachigo5 жыл бұрын

    thank you thank you thank you! I was trying to make one for ages, and finally managed to make a sticky dropdown with this! Your commentary was extremely helpful! I am looking at various tutorials to make this responsive, any tips?

  • @clementhenriet1185
    @clementhenriet11856 жыл бұрын

    great video, i've watched a lot and yours is the the best one. it's simple, well explained, thanks a lot!

  • @jordyjoelcarhuavilcavillan4287
    @jordyjoelcarhuavilcavillan42872 жыл бұрын

    you´re the best instructor i´ve even seen on all youtube, good video i love your way to teach.

  • @blossomorumor5862
    @blossomorumor5862 Жыл бұрын

    after watching lots of videos... i finally understood the whole concept.. thanks so so much man

  • @SPCabbage
    @SPCabbage4 жыл бұрын

    That is a great tutorial which I've ever seen! I need this because I am making a website for my brother about online shopping. Thank you!

  • @AbhimanyuSingh-ii1mi
    @AbhimanyuSingh-ii1mi6 жыл бұрын

    Your videos always help me alot!! Really you are real hero! :)

  • @pcartisan2721
    @pcartisan27214 жыл бұрын

    FANTASTIC and Detailed instructions! Very Nicely Done! Bravo, Bravo.

  • @kritibindra4232
    @kritibindra42324 жыл бұрын

    Absolutely brilliant... thanks for making this so easy😃

  • @aliefeozkan5453
    @aliefeozkan54534 жыл бұрын

    Very clear and understandable video. Thank you very much for this great tutorial.

  • @lichtgrau1002
    @lichtgrau10024 жыл бұрын

    This channel has the best tutorials for web development ! explanations are always clear

  • @HanulakTV
    @HanulakTV7 жыл бұрын

    Great work bro, as always. Keep It doing!

  • @donnchadhmcginley3153
    @donnchadhmcginley31535 жыл бұрын

    "nav ul li ul li a { }" , my head hurts

  • @sandortudja2087

    @sandortudja2087

    4 жыл бұрын

    You can target that with a class name as well.

  • @yahno3

    @yahno3

    4 жыл бұрын

    hahaha

  • @vsdy1990

    @vsdy1990

    4 жыл бұрын

    code examples of navbar menu examples. bootstrap-menu.com

  • @kongenerkasper

    @kongenerkasper

    4 жыл бұрын

    @@vsdy1990 This is only for using the bootstrap framework..

  • @nimish891

    @nimish891

    3 жыл бұрын

    navulliullia

  • @LiveINtheGood53
    @LiveINtheGood532 жыл бұрын

    You are awesome Dani! Thank you my friend. You are such a great teacher as you explain it very well.

  • @tech-mindresearch9299
    @tech-mindresearch929911 ай бұрын

    Yes it's true. You are explaining really well, without hiding. You make your students from zero knowledge to well informed.

  • @Dani_Krossing

    @Dani_Krossing

    11 ай бұрын

    I have a 2023 HTML course linked in the pinned comment, in case you are interested 🙂

  • @tech-mindresearch9299

    @tech-mindresearch9299

    11 ай бұрын

    @@Dani_Krossing yes please

  • @monarnyc
    @monarnyc2 жыл бұрын

    Thank you so Very Much!!!! You made this understandable and I now know how to do this.

  • @Rafagsadik
    @Rafagsadik4 жыл бұрын

    This is Amazing !! You have covered a lot of things in short video Tutorial , Many Thanks.

  • @allanobial4460
    @allanobial44604 жыл бұрын

    the best html css tutorial ever!!!!

  • @JoakoOvlack
    @JoakoOvlack5 жыл бұрын

    Domo Arigato Gosaimasu! Really helpful!

  • @leyuberhanu8760
    @leyuberhanu87602 жыл бұрын

    thank you very much, you're a life saver! I've tried many ways to do it, this is the one that works for me.

  • @christinec1674
    @christinec16742 жыл бұрын

    Thank you. Do you repeat the exact process if you have multiple drop-down menus within your nav?

  • @chogi9860
    @chogi98604 жыл бұрын

    YOU ARE THE BEST I DID NOT UNDERSTAND IT FROM ANYONE ELSE

  • @funstudying
    @funstudying2 жыл бұрын

    A very detailed step by step video. Thank you very much~

  • @antonytome6590
    @antonytome65904 жыл бұрын

    hey how do u find different colours when defining the colours of things such as the navigation and the body

  • @DIEZ919191
    @DIEZ9191914 жыл бұрын

    GREAT!!! TNX! I'm going to try to do it by myself!

  • @TheKineticSoftwareCompan-ti7hs
    @TheKineticSoftwareCompan-ti7hs4 ай бұрын

    You are the best lecturer I have seen big up bro

  • @sahawndada
    @sahawndada6 жыл бұрын

    Great vid. nice and clean!

  • @picsbymayank
    @picsbymayank5 жыл бұрын

    Lovely tutorial, thank you very much!

  • @sjebsstuff1354
    @sjebsstuff13545 жыл бұрын

    Thanks! This will help with my website!

  • @yipyipyip6672
    @yipyipyip66722 жыл бұрын

    can this work on a navigation bar which has been centered on the webpage instead of float:left;? my drop down menu is not going vertically but horizontally instead and its not directly underneath as well :(

  • @impidge19
    @impidge193 жыл бұрын

    Thanks man! this was the exact video I needed!

  • @thnqolo9667
    @thnqolo96675 жыл бұрын

    The best tutorial ever seen

  • @nilfarmohamed4778
    @nilfarmohamed47784 жыл бұрын

    Clear explanation... Thank you very much.

  • @coraurum3835
    @coraurum38355 жыл бұрын

    Thanks you so much dude you explained this really simple and clear to us to understand it.

  • @HEIT_CHANNEL
    @HEIT_CHANNEL2 жыл бұрын

    Thanks, very useful video, so now I can do my project at college way more easily

  • @anuraariyaratne4977
    @anuraariyaratne4977 Жыл бұрын

    You are a genius in terms of explaining. Very nice.

  • @rubhan94
    @rubhan946 жыл бұрын

    Very good tutorial! I just recently found your channel and I really like how much content you got :D will try to get through most of it ;) xD

  • @yajurvatrivedi7943
    @yajurvatrivedi79435 жыл бұрын

    Hello, thank you for the video. I ran into this problem regarding my drop down menu not showing as i have a video background running. Any way to solve this?

  • @sarguxih
    @sarguxih4 жыл бұрын

    Excellent tutorial. Thanks a lot!

  • @denisesimone6449
    @denisesimone64493 жыл бұрын

    AMAZINGGGGG, thank you for the class. Good teacher!

  • @itzbazil2802
    @itzbazil28023 жыл бұрын

    Can you put a dropdown menu inside of a dropdown menu? When you hover over the nav bar, and the first dropdown menu appears, can you then hover over that dropdown menu to get another dropdown menu?

  • @mu1682
    @mu16825 жыл бұрын

    hey, what editor are you using for html

  • @wolfenrico
    @wolfenrico6 жыл бұрын

    Nice tut, thanks. What about a dropdown menu responsive?

  • @pianoLee-sx9dx
    @pianoLee-sx9dx5 жыл бұрын

    I am a bit confused... do we still need to keep the anchor tag in our html page later? what if we wanted to include a another page should we write #web deveopment.php? or remove the #tag later?

  • @atulyadavSpag77
    @atulyadavSpag773 жыл бұрын

    You explained this video so good. Best tutorial on dropdown.

  • @m.a.rashakhan4534
    @m.a.rashakhan45345 жыл бұрын

    ONE OF THE BEST LECTURE.

  • @rasulbekirkinov8145
    @rasulbekirkinov81452 жыл бұрын

    Thanks for this awesome video why I am calling this awesome is because it is not only written at a quick pace but just every single thing is explained and if we want to just change something it is said that it is your preference. I got a lot, thank you for making this video, your style of teaching is like my teachers who always explains everything he teaches

  • @santiagotorres8680
    @santiagotorres86804 жыл бұрын

    Thank you so much for sharing us this amazing tutorial :)

  • @fabio_r_7683
    @fabio_r_76832 жыл бұрын

    very well and simply explained. thanks

  • @allenvasquez3342
    @allenvasquez33423 жыл бұрын

    Greatly helped me make my school project. Appreciate the effort! Thanks!!

  • @janasokolovic2496

    @janasokolovic2496

    3 жыл бұрын

    hey do u have thid code written cause my is not working?

  • @mostafashehata2154
    @mostafashehata2154 Жыл бұрын

    mannn thank you a lot you know i was search about how can i do that so finally i learn how can i do it thanks man

  • @writhenlord6325
    @writhenlord63255 жыл бұрын

    Curious if theres a way to make a drop down menu thats to the side the only way i cant think to describe what i mean is kinda like how in tes 5 skyrim the items menu

  • @bluesmaster1005
    @bluesmaster1005 Жыл бұрын

    Thanks for this tutorial it was so great! You are a fantastic instructor.

  • @pzhah3419
    @pzhah34194 жыл бұрын

    Thank you so much! This helped me a lot!

  • @sirprize2524
    @sirprize25244 жыл бұрын

    thank you, that was awesome. Even 3 years later

  • @bobdinitto
    @bobdinitto2 жыл бұрын

    Nice effect. Thank you for your clear explanation.

  • @gtmix
    @gtmix5 жыл бұрын

    thank you so much i really liked this video :)

  • @ismaciilibraahim3724
    @ismaciilibraahim37242 жыл бұрын

    Good insturctor i watched many videos and i don't understand anything you're explain clearly thankz teacher for help us

  • @stepbystepscience
    @stepbystepscience6 жыл бұрын

    Another amazing video. I am working on my portfolio page for free code camp. Am definitely going to use this.

  • @MartinaRizzacasa
    @MartinaRizzacasa5 жыл бұрын

    this video is super helpuful! thanks! ;)

  • @moredeposits6800
    @moredeposits68005 жыл бұрын

    I had to use "display: inline;" on the "li" to get the links to flow horizontally, other wise they would float left but still be vertical on top of eachother. Can someone explain?

  • @myam754

    @myam754

    4 жыл бұрын

    Think of every element in your page as boxes. display: block = boxes(elements) in your page are stacked vertically display: inline = boxes(elements) in your page are stacked inline/horizontal HTML elements that aren't inline elements use display:block as default, so you have to change their display type to inline if you want to display them horizontally.

Келесі