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

Поделиться
HTML-код
  • Опубликовано: 2 фев 2025

Комментарии • 547

  • @Dani_Krossing
    @Dani_Krossing  2 года назад +2

    NEW UPDATED 2023 COURSE AVAILABLE! 🙂
    You can find it here: ruclips.net/video/v8jDnBYc0bs/видео.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 11 месяцев назад

      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
    @keithwilson5229 5 лет назад +42

    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
    @bapynshngain 3 года назад +5

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

  • @baragydurugy9084
    @baragydurugy9084 6 лет назад +4

    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.

  • @johnonguka6079
    @johnonguka6079 3 года назад +3

    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

  • @pocketsquareformat
    @pocketsquareformat 7 лет назад +43

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

  • @Hamad-of1gc
    @Hamad-of1gc 6 лет назад +9

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

  • @julianthegreat4995
    @julianthegreat4995 5 лет назад +223

    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 5 лет назад +10

      Welcome to school soldier

    • @arewenot
      @arewenot 4 года назад +13

      that's basically how college works

    • @orlandorojasmoncada9110
      @orlandorojasmoncada9110 4 года назад +11

      that's basically how programming works

    • @celticpanda1494
      @celticpanda1494 4 года назад +7

      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 года назад +1

      @@celticpanda1494 Same

  • @aprilformosa
    @aprilformosa 6 лет назад +5

    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 6 лет назад

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

    • @janasokolovic2496
      @janasokolovic2496 4 года назад +2

      @@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 RUclips Channel.

  • @truths33ker29
    @truths33ker29 6 лет назад +7

    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.

  • @user-wl7yb4zb8p
    @user-wl7yb4zb8p 5 лет назад +4

    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'.

  • @lobzangchamba8197
    @lobzangchamba8197 4 года назад +2

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

  • @efraimgalindez1457
    @efraimgalindez1457 9 месяцев назад +1

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

  • @tech-mindresearch9299
    @tech-mindresearch9299 Год назад +1

    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  Год назад

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

    • @tech-mindresearch9299
      @tech-mindresearch9299 Год назад

      @@Dani_Krossing yes please

  • @jtc9098
    @jtc9098 Год назад +1

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

  • @believeingodalways
    @believeingodalways 3 года назад

    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

  • @LVusaAPI
    @LVusaAPI 2 года назад

    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

  • @philiposztromok5601
    @philiposztromok5601 3 года назад +6

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

  • @chrumczyk5494
    @chrumczyk5494 2 года назад +1

    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.

  • @jordyjoelcarhuavilcavillan4287
    @jordyjoelcarhuavilcavillan4287 2 года назад

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

  • @jamesmclean5790
    @jamesmclean5790 3 года назад +1

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

  • @TheKineticSoftwareCompan-ti7hs
    @TheKineticSoftwareCompan-ti7hs Год назад +1

    You are the best lecturer I have seen big up bro

  • @ruggedbypowell
    @ruggedbypowell 2 года назад

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

  • @BalkanDrifters
    @BalkanDrifters 4 года назад +4

    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:

  • @samuelravikanth830
    @samuelravikanth830 3 года назад

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

  • @chogi9860
    @chogi9860 4 года назад

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

  • @cynthiamanor6565
    @cynthiamanor6565 4 года назад +8

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

  • @christinec1674
    @christinec1674 3 года назад +1

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

  • @dianapinto3779
    @dianapinto3779 2 года назад +1

    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

  • @LiveINyourGood54
    @LiveINyourGood54 3 года назад +1

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

  • @donnchadhmcginley3153
    @donnchadhmcginley3153 5 лет назад +157

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

    • @sandortudja2087
      @sandortudja2087 5 лет назад +3

      You can target that with a class name as well.

    • @yahno3
      @yahno3 5 лет назад

      hahaha

    • @vsdy1990
      @vsdy1990 5 лет назад +1

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

    • @kongenerkasper
      @kongenerkasper 4 года назад +4

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

    • @jack-z2121
      @jack-z2121 4 года назад

      navulliullia

  • @metyzcz
    @metyzcz 3 года назад +1

    This is really HELPFUL!!! :3 :) LIKE

  • @pcartisan2721
    @pcartisan2721 4 года назад

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

  • @ferideva_art
    @ferideva_art 3 года назад +1

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

  • @lichtgrau1002
    @lichtgrau1002 4 года назад

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

  • @wegallagher
    @wegallagher 7 лет назад +14

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

  • @shubhamujjwal328
    @shubhamujjwal328 3 года назад

    wow .. its awesome. I created a dropdown along this video. 😄

  • @MedyZeus
    @MedyZeus 3 года назад

    You're an angel.. thank you !

  • @monarnyc
    @monarnyc 3 года назад

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

  • @akashaansari9795
    @akashaansari9795 4 года назад

    Finallyyyyyyyy!! I did it..!! After 3 damn days, it was possible to make a drop-down menu. Thank you so much, sir!

    • @janasokolovic2496
      @janasokolovic2496 4 года назад

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

    • @akashaansari9795
      @akashaansari9795 4 года назад

      @@janasokolovic2496 Yeah! I have practiced creating the dropdown menu, and this video has helped me a lot.

  • @itzvalidity6485
    @itzvalidity6485 3 года назад

    OMG this is literally the best thing ever THANK YOU SO MUCH!!!!!!!!!!!!!!!!!!!!

  • @madcat187
    @madcat187 4 года назад

    OMG thank you bro!!! ❤😎 got it!

  • @barnetteputong2652
    @barnetteputong2652 3 года назад

    Wow! Amazing! Nice CSS coding! Thanks 🙏

  • @anuraariyaratne4977
    @anuraariyaratne4977 2 года назад

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

  • @HEIT_CHANNEL
    @HEIT_CHANNEL 3 года назад

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

  • @yipyipyip6672
    @yipyipyip6672 3 года назад +1

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

  • @sdftrd
    @sdftrd 6 лет назад +3

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

  • @leyuberhanu8760
    @leyuberhanu8760 3 года назад

    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.

  • @bryanzofficialtv5979
    @bryanzofficialtv5979 6 лет назад +5

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

  • @itzbazil2802
    @itzbazil2802 4 года назад +4

    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?

  • @saitenwurstchen8072
    @saitenwurstchen8072 6 лет назад +6

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

  • @nozrulchoudhury523
    @nozrulchoudhury523 6 лет назад +1

    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!

  • @bobdinitto
    @bobdinitto 3 года назад

    Nice effect. Thank you for your clear explanation.

  • @MyNegativeCreep
    @MyNegativeCreep 5 лет назад +1

    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.

  • @kritibindra4232
    @kritibindra4232 5 лет назад +1

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

  • @unholygrail4676
    @unholygrail4676 5 лет назад

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

  • @ugosouza2127
    @ugosouza2127 4 года назад

    Great material Mr! Thanks

  • @Crisikos
    @Crisikos 7 лет назад +2

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

  • @vintage-videos
    @vintage-videos 2 года назад

    This is a fantastic tutorial, thanks so much!

  • @wilrockcreates
    @wilrockcreates 5 лет назад +2

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

  • @impidge19
    @impidge19 3 года назад

    Thanks man! this was the exact video I needed!

  • @stepbystepscience
    @stepbystepscience 7 лет назад

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

  • @lovesart.9835
    @lovesart.9835 2 года назад

    Great Tutorial!☺

  • @F.____.__r-y3t
    @F.____.__r-y3t 3 года назад

    very well and simply explained. thanks

  • @MonaMiresmaeili-v1s
    @MonaMiresmaeili-v1s 5 месяцев назад

    Wow thank you so much for your explanation such a useful tutorial 🙏🏻

  • @funstudying
    @funstudying 3 года назад

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

  • @aizhanshygaeva2100
    @aizhanshygaeva2100 4 года назад

    You are great teacher.

  • @esimm595
    @esimm595 5 лет назад +1

    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.

  • @denisesimone6449
    @denisesimone6449 4 года назад

    AMAZINGGGGG, thank you for the class. Good teacher!

  • @jrc171974
    @jrc171974 2 года назад

    Excellent explanation and this video is way much better than my useless professor at school....

  • @bulldawg4498
    @bulldawg4498 5 лет назад

    Heavy duty CSS ... He makes it look so easy!

  • @rasulbekirkinov8145
    @rasulbekirkinov8145 3 года назад

    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

  • @allenvasquez3342
    @allenvasquez3342 4 года назад

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

    • @janasokolovic2496
      @janasokolovic2496 4 года назад

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

  • @aliefeozkan5453
    @aliefeozkan5453 5 лет назад +1

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

  • @Lifeofrandomness
    @Lifeofrandomness Год назад

    You are awesome!🤟

  • @allanobial4460
    @allanobial4460 5 лет назад

    the best html css tutorial ever!!!!

  • @mulugetaworkuayele6412
    @mulugetaworkuayele6412 2 года назад

    Very useful and thank you!

  • @ember9361
    @ember9361 2 года назад

    hey thank you so much! i appreciate you not declaring any IDs or Classes, it makes it much easier to understand what each part needs to be stylized with what!

  • @nilfarmohamed4778
    @nilfarmohamed4778 5 лет назад

    Clear explanation... Thank you very much.

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

  • @atulyadavSpag77
    @atulyadavSpag77 3 года назад

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

  • @bluesmaster1005
    @bluesmaster1005 2 года назад

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

  • @moredeposits6800
    @moredeposits6800 5 лет назад +6

    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 5 лет назад

      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.

  • @deviljinx45
    @deviljinx45 3 года назад

    Thank you very much that is a very good demonstration

  • @triggaj5279
    @triggaj5279 4 года назад

    Excellent walkthrough.

  • @JoakoOvlack
    @JoakoOvlack 5 лет назад

    Domo Arigato Gosaimasu! Really helpful!

  • @balance_andbliss
    @balance_andbliss 5 лет назад +1

    Thank you so much!!!!!

  • @rayphenicie7344
    @rayphenicie7344 Год назад +1

    A lot of 'ul', 'li' 'ul', 'li' 'a', 'ul', li's to keep track of. That's why div's are preferable. Otherwise, very clever. Now I have to figure out how to add the hover feature to all of the menu items.

  • @omarzavala1491
    @omarzavala1491 3 года назад

    Thank you for the video, it was very useful for me

  • @williamkakooza4603
    @williamkakooza4603 2 года назад

    I have watched this video 5X. Thanks Mr. Dani

  • @vrcxmeta4598
    @vrcxmeta4598 5 лет назад

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

  • @ismaciilibraahim3724
    @ismaciilibraahim3724 2 года назад

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

  • @DIEZ919191
    @DIEZ919191 5 лет назад

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

  • @Patrick-rp8gi
    @Patrick-rp8gi 3 года назад

    Perfect tutorial!

  • @cihadceylan1563
    @cihadceylan1563 4 года назад

    All I wonder is told in last 2 minutes. =) Thanks..

  • @reveng6705
    @reveng6705 3 года назад

    Thank you very much for this great tutorial!

  • @rajithasunil8034
    @rajithasunil8034 5 лет назад +3

    Thank you so much for explaining each and everything very clearly.

  • @kevinh9741
    @kevinh9741 4 года назад

    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!

  • @MillennialJesus
    @MillennialJesus 7 лет назад

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

  • @natka34764
    @natka34764 4 года назад

    You are amazing. Thank you!