How To Make Drop Down Menu Using HTML And CSS

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

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

  • @FrancisUnegbu-r5b
    @FrancisUnegbu-r5b Год назад +2

    I understood every bit of it, thank you so much, I've been struggling with dis for several months

  • @1k3j95
    @1k3j95 2 года назад +18

    man this stuff blew my mind, the clarity of thought you have is amazing

  • @Krishnasaini
    @Krishnasaini 8 месяцев назад +1

    instead of hardcoding left:150px, we can do right:0 and transform: translateX(100%). it will align the chile to the right edge of the parent. Good video

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

    One of the best video in entire youtube. keep it up

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

    Nice and awesome....................Extraordinary

  • @DavidNwaogu
    @DavidNwaogu Месяц назад +1

    Great tutorial

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

    love your intro 1st time here def sub

  • @danielkim1034
    @danielkim1034 2 года назад +6

    Nice and clean. Thanks a lot!

  • @SushilMouje
    @SushilMouje 10 месяцев назад

    Excellent tutorial :)

  • @albedesigns
    @albedesigns Год назад +2

    Great video - straight to the point and easy to understand! Subbed as well!

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

      Thank you so much for your kind feedback!
      I'm thrilled to hear that you found the video helpful and easy to follow. I appreciate your support !

  • @YasaruDeneth
    @YasaruDeneth 6 месяцев назад +4

    one year a go i make a website i didnt remember to how to make a dropdown menu so i search every way the web videos and studing but i found this video i learn how to make a dropdown menu and the year later i forget to backup it so it deleted when i m cleaning the storage to get more space on disk i cant find anywher in disk but i think i found this video again

  • @saidulislamnayeem7200
    @saidulislamnayeem7200 2 года назад +3

    Just Wow. I learned dropdown menu to easy way ❣️🥀

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

    Amazing explanation. This video helped me understand how to use hover effect in Navigation bar that I have seen in many websites such as Steam. Thanks for this tutorial.

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

    Good luck bro✊

  • @Azaniqbal-wk7bk
    @Azaniqbal-wk7bk Год назад

    wow Amazing😍

  • @joelojo4072
    @joelojo4072 10 месяцев назад

    Amazing video, keep it up man 👏🏾 ...Can you teach how to make it responsive tho

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

    Thank you, easy and straightforward

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

    Amazing explanation.

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

    thank y for the video...just learnt something new today!!!

  • @brightasinde7034
    @brightasinde7034 11 месяцев назад

    I appreciate you for putting A good work for us.
    Please can you crate a contact menu or nav bar with a link button to it
    So that when you click on contact menu a pop up form will display. Like contact us form, logging or massage us form will display as a popup in contact menu❤

  • @naturevibe172
    @naturevibe172 8 месяцев назад

    Thanks a lot! 😊

  • @nayanwabale5362
    @nayanwabale5362 10 месяцев назад

    Make 1 video about how to design navigation bar drop-down menu
    Means when we click on particular drop-down menu then automatically open next webpage

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

    Very Nice

  • @RiffatNaeem-m3p
    @RiffatNaeem-m3p 4 месяца назад

    Thank you 💓

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

    legend❤❤

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

    very nice sr

  • @AlexAnder-fk2yg
    @AlexAnder-fk2yg 2 года назад

    great vid, so easy for you

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

    did all steps correctly but the dropdown wont display up at top its stuck in left bottom.

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

    great explanation, thank you

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

    Great info..

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

    keep it up bro

  • @amhsports-o6o
    @amhsports-o6o Год назад

    thanks alot sir

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

    thanks for the help bro i subbed

  • @amirakhaled-yg9gq
    @amirakhaled-yg9gq Год назад

    nice Design

  • @divyanshurawat-ox8xi
    @divyanshurawat-ox8xi Год назад

    BEST VIDEO

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

    Thanks a lot!

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

    tnx brother

  • @lucatudtudose3299
    @lucatudtudose3299 2 года назад +3

    I still have trouble putting the caret down

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

    I can see my caret icon?

  • @sureshoddolu1532
    @sureshoddolu1532 8 месяцев назад

    Nice

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

    nice effort plz agr ap esy ak ak lfz smjha b. dyein TU mere lye asani hogi plz

  • @ThotaNarendraLifeSciences
    @ThotaNarendraLifeSciences 6 дней назад

    Anybody help me to write this code in mobile or tab view mode..

  • @An-yh2bl
    @An-yh2bl 2 года назад +1

    It was good, I would like to do it with JS though. :)

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

    Thanks :)

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

    . dropdown-menu-1 { display: none;}
    Command not working. Please help.. here
    But first main menu
    . dropdown-menu { display: none;} woking.

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

    I Love this background Tune, what's the instrumental name

  • @madhuras1762
    @madhuras1762 7 месяцев назад

    are u using notepad or something else ?
    can u tell me which application u are using?

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

    Thank you Sir

  • @SR-gk3gm
    @SR-gk3gm 2 года назад

    Interesting

  • @EltonPajaziti-x9y
    @EltonPajaziti-x9y Год назад

    Great Video-Man Can u help me if i want FAQ to have right section like Team how to write code ?

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

    thank you very much

  • @somadinakyrian3064
    @somadinakyrian3064 5 месяцев назад

    Can I get the link to the background img

    • @lightcodechannel
      @lightcodechannel  5 месяцев назад +1

      Please see the description for the GitHub link to the assets folder.

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

    Athume solama epudi podurathuku neega vedio podamale irukalam brooo😂

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

    hover does'nt work. all code are right , whats the problem

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

      Please see the description.
      There is a source code link, Please download and check again.

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

      @@lightcodechannel source code still doesn't work mate.

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

    it's outstanding but the problem is that i also do the half part and the half part use this video but just i apply display none it's then apply hover so it''s not work

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

    helpful

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

    Thank u

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

    Thk

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

    thanks

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

    Mate Please Tell me difference between postion absoulte and position relatives Mostly
    Doing Back end I forget

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

      And Please Tell me What is that height : calc(100vh-80px);

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

      100vh refers to 100% of the viewport height, which is the height of the browser window.
      So, calc(100vh - 80px) would result in a height value that is equal to the full height of the viewport minus 80 pixels.

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

      I suggest taking a look at the article below as it may provide you with the answer you are seeking.
      kolosek.com/css-position-relative-vs-position-absolute/

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

    can you please tell me which app you are using for html

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

    Cool

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

    vai kotha ta hole icon er jonno ki bosstrap ba ki link babohar korchen bujlam na

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

    Very good and working code. Others have demos but code does not work.

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

    Hello I wanted to ask if you could maybe show how to pin this drop download menu so that it is watching it scollen down all the time. Please this is very important for me I have to do this in chemistry.

  • @29ibrahimsayed95
    @29ibrahimsayed95 Год назад

    hover is not working properly

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

    How tow write paragraph contents for main tabs and sub tabs . Plz help

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

    sub-menu is defined name or user defined name?

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

    Image box pola mattum thaan varuthu anna

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

    Demo please sir!

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

    This is not mobile responsive. Drop down does not work properly on mobile phone.

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

    How do I make these link in center

  • @JeniferWilfred
    @JeniferWilfred 2 месяца назад

    It's not working for me 😢

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

    👍

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

    nevermind i got it to work mate.

  • @aikotan5884
    @aikotan5884 3 года назад +2

    can you do one where the navbar box doesn't cover the logo but its the same line?

  • @el-jivacarter552
    @el-jivacarter552 2 года назад

    How did u make ur name logo look real

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

    its wow but at the end i couldn´t see the last css thing

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

      Thanks
      Now you can see :)

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

      @@lightcodechannel thanks but I have A Problem : i Put my Image for the background but it didn't worked

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

      @@m0d_du_b0t18 same problem

  • @danforumHU
    @danforumHU 7 месяцев назад +1

    nice, but not responsive.

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

    Codes are not visible😢😢😢😢😢

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

    Bro first you check how to be responive.

  • @aroojmazhar-b4w
    @aroojmazhar-b4w Год назад

    code available ha ?

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

      Arooj, Please take a look at the source code link mentioned in the description.

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

    +1 sub

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

    Thanksssssssssssssss............

  • @Mandadi.Damodar
    @Mandadi.Damodar Год назад

    Source code bro

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

    What is the app coding name?

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

      Its VS Code Editor, Alex.
      Please check this out code.visualstudio.com

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

      @@lightcodechannel thanks

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

    Can you plz provide source code

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

    This is using for loop

  • @abrorturdialiyev
    @abrorturdialiyev 7 месяцев назад

    nimaga manda oxshamadi

  • @carnofagus
    @carnofagus 3 месяца назад

    No responsive? Next!

  • @mohammedafzal3761
    @mohammedafzal3761 8 месяцев назад

    So disgusting

  • @rishisharma8596
    @rishisharma8596 7 месяцев назад

    thank you

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

    thanks