Simple Dropdown Menu Using HTML and CSS

Source Code on our Website: HowToCodeSchool.com
In this tutorial we will see how to create Simple Dropdown Menu Using HTML and CSS. CSS position property and :hover selector is used for this purpose.
#dropdown #menu #css

Пікірлер: 128

  • @lea-anon
    @lea-anon7 ай бұрын

    Legendary. This person did in 2 minutes, simply and straightforwardly, in the easiest way to explain and understand, that nobody on the internet (after a week of research) was able to do. have a like, sub, and comment, man. Well done.

  • @HowToCodeSchool

    @HowToCodeSchool

    7 ай бұрын

    Glad it helped, thanks a lot for your kind feedback. (:

  • @govardhanvk

    @govardhanvk

    Ай бұрын

    same same thank you bro #howtocodeschool

  • @nerd.insights
    @nerd.insights11 ай бұрын

    So great I done my assignment just under 2 minutes🎉🎉

  • @erwinmeisel2545
    @erwinmeisel25458 ай бұрын

    A great tutorial! I am looking forward to change some values and test out the limits of this code.

  • @gantavyasaraswat2130
    @gantavyasaraswat21307 ай бұрын

    THanks so much, been struggling with this basic thing for a day

  • @babulakter9209
    @babulakter92093 ай бұрын

    I have no word !!!!!!!!!!!!!!! Just Thank you so much God bless you.

  • @Atom-oo9ox
    @Atom-oo9ox Жыл бұрын

    Short and simple ✅👍

  • @Bilbosh4ggins
    @Bilbosh4ggins10 ай бұрын

    does this work with the astra theme installed, for me the text is centered but the dropdown box is off centre

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

    Thank you so much👑 Almost finish my blog, big thanks👍

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    Great job, you are most welcome!

  • @hiensitv2591
    @hiensitv25919 ай бұрын

    Very usful, thank yoy ❤

  • @imapotatohhh
    @imapotatohhh5 ай бұрын

    THANK YOU SO MUCH! THIS IS A BIG HELP! 😭😭😭😭😭😭😭(especially to me who doesn't listen to class😅)

  • @HowToCodeSchool

    @HowToCodeSchool

    5 ай бұрын

    Happy to help!

  • @vijayragavan907
    @vijayragavan9077 ай бұрын

    Excellent job 👏

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

    superb Man becz of u my doubt got clarified thanks a lot .

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    You are most welcome, Glad we could help. (:

  • @DaniyalDaniyal-qw4rp
    @DaniyalDaniyal-qw4rp7 ай бұрын

    Best tutorial on this topic.

  • @karp_4902
    @karp_49028 ай бұрын

    If i wanted to have some list items on the left of the bar, and some on the right of the bar, would i need to create two seperate lists and allign one left and the other right?

  • @sohaibedits4749

    @sohaibedits4749

    8 ай бұрын

    You have to use position absolute on such elements and give them margin from left

  • @jordipollard
    @jordipollard3 ай бұрын

    how do you change it so the box around the text on the dropdown menu isnt so big

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

    Hello. I am unable to get the menu to drop from the Languages hover. I have followed very precisely.

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

    Quality tutorial, thank you!

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    Thanks so much. (:

  • @whos.tinker
    @whos.tinker Жыл бұрын

    Beautiful THANKS

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

    and as always great music! thanks

  • @akhjgaming7152
    @akhjgaming71526 ай бұрын

    Best tutorial on this topic. Great work man

  • @HowToCodeSchool

    @HowToCodeSchool

    6 ай бұрын

    Thanks so much.

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

    This video is very useful and understandable and also very simple

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    Glad you think so!

  • @gouravchouhan5616
    @gouravchouhan56168 ай бұрын

    Thanks 👍

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

    thank you mate for this! way to go!

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    My pleasure Sir, thanks for your feedback.

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

    its strange.. my menu is located at the bottom, somehow i miss something ... (bit of a beginner here ;)

  • @jamiebrzzzgaming9692

    @jamiebrzzzgaming9692

    8 ай бұрын

    you need to do this right under body

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

    How to add content to that html ,css,js and php?

  • @tejug3813
    @tejug38135 ай бұрын

    Superb well understand loved it ❤

  • @HowToCodeSchool

    @HowToCodeSchool

    5 ай бұрын

    Glad to hear that

  • @rohanhanx
    @rohanhanx9 ай бұрын

    Thank u so much bro.iby this vedio i mmade my assignment 🤗

  • @HowToCodeSchool

    @HowToCodeSchool

    9 ай бұрын

    Love to read such feedback, good luck. (:

  • @hamerzz3785
    @hamerzz37853 жыл бұрын

    add voice. but yeah overall keep up with good work!!

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

    Thanks, it works.

  • @SP-Cooking
    @SP-Cooking5 ай бұрын

    Best video for me thanks for your teaching

  • @HowToCodeSchool

    @HowToCodeSchool

    5 ай бұрын

    It's my pleasure. (:

  • @ashishkabirpanthi5540
    @ashishkabirpanthi55407 ай бұрын

    Thanks bro❤

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

    Music is annoying. Overall good.

  • @Sadhupushpa
    @Sadhupushpa20 күн бұрын

    Super bro

  • @cececlark7087
    @cececlark708724 күн бұрын

    Thank you!!!

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

    🔥

  • @Baking_Blitz
    @Baking_Blitz7 ай бұрын

    thank you so much its toooo help full😢

  • @HowToCodeSchool

    @HowToCodeSchool

    7 ай бұрын

    Happy to help (:

  • @mikrus_pl6434
    @mikrus_pl643420 күн бұрын

    bro thanks my teacher spend for it 2h and i cant understant this

  • @user-rr9sh5lv9q
    @user-rr9sh5lv9qАй бұрын

    Thank you !

  • @j.o.federe3488
    @j.o.federe3488 Жыл бұрын

    Thank you helped me a lot

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    Glad it helped. (:

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    and you are most welcome.

  • @unusrex3468
    @unusrex346821 күн бұрын

    i wish i could give you a thousand likes!!!

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

    is responsive?

  • @dekafmusic
    @dekafmusic4 ай бұрын

    Thank you.

  • @user-dc4bw6jh1u
    @user-dc4bw6jh1u2 ай бұрын

    thank you sir

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

    Very useful and easy ❤️

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    Thanks a lot 😊

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

    thank you vary maus

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

    how to make it accessible?

  • @fercho1820
    @fercho18209 ай бұрын

    Gracias mi pez

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

    Is there a way to make the dropdown menu appear when Languages is clicked as opposed to hovered over?

  • @Psalmist01

    @Psalmist01

    10 ай бұрын

    using the pseudo element li:clicked rather than li:hover should do the trick

  • @inri7420
    @inri74203 ай бұрын

    Helpful video, but the drop down goes down till the half of the screen along with the other list attributes. Also can you upload your code so I can see what i did wrong

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

    thank you❣

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    You're welcome 😊

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

    works but where exactly do i put the CSS part in conjunction with the HTML piece?

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    In a separate file with .css extension and then you can include that file in HTML file.

  • @YURTZYN42

    @YURTZYN42

    Жыл бұрын

    @@HowToCodeSchool ohhh ok ok

  • @YURTZYN42

    @YURTZYN42

    Жыл бұрын

    @@HowToCodeSchool so do i like, put an href to the file above the html part for the css? i have it in a css file now not sure what to do.

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    Sorry for the delayed reply, Yes just include css like this in your html file.

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    style.css is the name of css file with extension and both .html and .css should be in the same folder.

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

    Bro do u help me? I dont make this dropdown its not working for me?

  • @AliAbuZiyad

    @AliAbuZiyad

    25 күн бұрын

    oh, I had the same issue and I fixed it, so, this is my drop-down button. Button Text blah blah blah your error is probably over here; you need to do put " class="dropdown" " for it to work

  • @TheSunShineGaming

    @TheSunShineGaming

    23 күн бұрын

    @@AliAbuZiyad Thanks

  • @AliAbuZiyad

    @AliAbuZiyad

    23 күн бұрын

    @@TheSunShineGaming np

  • @godmatjar1
    @godmatjar12 ай бұрын

  • @nixgamerz9485
    @nixgamerz94858 күн бұрын

    thanks

  • @dennisbb1352
    @dennisbb13526 ай бұрын

    Thanks so much

  • @HowToCodeSchool

    @HowToCodeSchool

    6 ай бұрын

    You're welcome. (:

  • @doncleber
    @doncleber15 күн бұрын

    Very god!

  • @vaanshasija8110
    @vaanshasija81103 ай бұрын

    what doea # mean in a

  • @gkfactsandquiz3056

    @gkfactsandquiz3056

    2 ай бұрын

    It again comes to the same html file

  • @selfishhsifles4536
    @selfishhsifles45363 ай бұрын

    A:hover doesnt work for mobile

  • @simran4981
    @simran49813 ай бұрын

    how did you created the drop down symbol?

  • @HowToCodeSchool

    @HowToCodeSchool

    3 ай бұрын

    You can use this HTML Code ▾ for down pointing arrow.

  • @simran4981

    @simran4981

    3 ай бұрын

    @@HowToCodeSchool thank you it's working 😊

  • @reshmakumari8166
    @reshmakumari81663 ай бұрын

    I,ll try

  • @Exmazi
    @Exmazi5 ай бұрын

    where can I copy the dropdown icon after the "Languages"

  • @HowToCodeSchool

    @HowToCodeSchool

    5 ай бұрын

    You can use this HTML Code ▾ for down pointing arrow.

  • @Exmazi

    @Exmazi

    5 ай бұрын

    @@HowToCodeSchool thank youu, it worked on mine 👍

  • @darpansaini9792
    @darpansaini97924 ай бұрын

    how you get that drop down arrow

  • @HowToCodeSchool

    @HowToCodeSchool

    4 ай бұрын

    You can use this HTML Code ▾ for down pointing arrow.

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

    How to add language selector?

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    You can use this HTML Code ▾ for down pointing arrow.

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

    Thank you But what is the name of the music😆😆😆

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    We have changed it :D

  • @brmosa6229

    @brmosa6229

    Жыл бұрын

    @@HowToCodeSchool nooooo 🥲

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

    How do you connect tabs to those dropdowns ?

  • @gamerpie1

    @gamerpie1

    Жыл бұрын

    same question

  • @09rushigaming
    @09rushigaming3 ай бұрын

    Ye wala source code available Karo na..

  • @gimpayajosephl.969
    @gimpayajosephl.969 Жыл бұрын

    how to do the arrow down in line 12, after the word Languages

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    You can use this HTML Code ▾ for down pointing arrow.

  • @gimpayajosephl.969

    @gimpayajosephl.969

    Жыл бұрын

    @@HowToCodeSchool thank you very much

  • @jaismotherskitchen6277

    @jaismotherskitchen6277

    Жыл бұрын

    @@HowToCodeSchool or for black color arrow??

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    just change it's color using css.

  • @HowToCodeSchool

    @HowToCodeSchool

    5 ай бұрын

    You can use this HTML Code ▾ for down pointing arrow.

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

    code source please

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    www.howtocodeschool.com/2021/01/simple-dropdown-menu-using-html-and-css.html

  • @user-lr9kx6jl2m
    @user-lr9kx6jl2m6 ай бұрын

    i want to source code...........

  • @HowToCodeSchool

    @HowToCodeSchool

    6 ай бұрын

    www.howtocodeschool.com/2021/01/simple-dropdown-menu-using-html-and-css.html

  • @DojoDyo
    @DojoDyo5 ай бұрын

    awesome like sub and comment deserve

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

    background music name ?? 😂😂

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

    Is that background music really necessary? Not only is it irritating but plain unwanted!!!

  • @HowToCodeSchool

    @HowToCodeSchool

    Ай бұрын

    Feedback taken, thank you. (:

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

    could you please attach the files of this? i want to use it for reference :)

  • @HowToCodeSchool

    @HowToCodeSchool

    Жыл бұрын

    You can use the code from here: www.howtocodeschool.com/2021/01/simple-dropdown-menu-using-html-and-css.html#video-tutorial

  • @hadjer9958

    @hadjer9958

    11 ай бұрын

    @@HowToCodeSchool thanks!!

  • @rick_from_yr
    @rick_from_yr3 ай бұрын

    no code, no like

  • @HowToCodeSchool

    @HowToCodeSchool

    3 ай бұрын

    Code is available on our website: www.howtocodeschool.com/2021/01/simple-dropdown-menu-using-html-and-css.html

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

    How do I make the dropdown smooth and not so abrupt?

  • @tomcoop9750

    @tomcoop9750

    Жыл бұрын

    Instead of using “display block” make the height change and add a CSS transition to the height value to animate it.

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

    Thanks 👍