Learn CSS dropdown menus in 6 minutes! 🔻

[@BroCodez]

Bro Code Food Apple Orange Banana /* style.css */ .dropdown{ display: inline-block; } .dropdown button{ background-color: hsl(0, 0%, 80%); color: white; padding: 10px 15px; border: none; cursor: pointer; } .dropdown a{ display: block; color: black; text-decoration: none; padding: 10px 15px; } .dropdown .content{ display: none; position: absolute; background-color: hsl(0, 0%, 95%); min-width: 100px; box-shadow: 2px 2px 5px hsla(0, 0%, 0%, 0.8); } .dropdown:hover .content{ display: block; } .dropdown:hover button{ background-color: hsl(0, 0%, 70%); } .dropdown a:hover{ background-color: hsl(0, 0%, 90%); }

[@Blueperry1512]

u r the best tutor , I've searched for many video how to create dropdown , your video is magnificent at all.

[@babylegs5049]

I watched 5 videos before this one on the same subject, you were the only one that I actually understood what you were doing, thank you so much

[@TECHTUBEOfficial1]

Same here

[@OfficerAshes]

The best Way to do a dropdown menu. Its so simple. Thanks ❤

[@Honda4Ever]

A simple and quick tutorial. I couldn't need more! Thank you 🙏

[@Spacetime23]

personally, the best and satisfying explanation which I could understand bit by bit. beginner-friendly! thanks a lot bro.

[@mswondo]

I try to use focus-within to replace the javascript. But we must click on it to appear the pulldown/drop down. And using left, right, top, bottom; I try to control the direction of the dropdown. It's may be : drop down to left, drop down to right, drop up to left, drop up to right.

[@davidhusted817]

You must to add a third parameter for the addeventlistener to "false" , because the default event is bubbling , {From the parent to child}

[@mswondo]

@@davidhusted817 I think its not necessary. Because if the anchor is a link with href, so its not have sub menu on it. So its a reguler link thats no need to stop the event bubble. But if the anchor has sub menu, its no need href so no event need to listener. An anchor automatic have behaviour that focused when after clicked. If we want to ensure that, we can use attribute : tabindex="0". So focus-within will automatically show or hidden sub menu.

[@smartgadgets5996]

Hello.. please make a video auto slide image... I dont get what they teach..you are a good teacher and teach the simple understanding way for us.. thank you

[@ThomasIkemann]

04:50 I did not know you can do something like that, thank you!

[@zahid1909]

You are a real Master, bro! Respect!!

[@okhakhugaruba8551]

Thank you for this lecture. It really helped me ❤

[@tomyshalpy]

simple explantion thank you

[@_izro_]

Best Explanation Love From Pakistan

[@FrederikWoellert]

Nice Video.

[@jgiixom]

Bro, u r the best!

[@khalidelgazzar]

Great lesson. Thank you

[@mariafortes1133]

Thanks for the video!

[@RAKibHasan_351]

Thanks bro very helpful

[@kineabmetasbia3021]

THE BEST THERE IS

[@kavishkaimalsha9230]

Grate video and thank you so much

[@iopyrb]

nice and simple 🔥

[@daru3112]

thank you bro God bless

[@eulersosa6840]

Is it possible to change the fonts in drop down menus in Crome? Not using html.

[@cs8529]

Thanks for sharing Bro.

[@pyitheinkyawpyitheinkyaw]

thank a lot sir .

[@kell3rgeist]

Thank you!!!!!!!💓💕💞💖💗💓

[@DubZinio]

ty so much dude lu

[@CharlesWarugu]

Be blessed

[@ruzalshrestha1998]

God bless u

[@motivationda2067]

thank you

[@danielleburchett6837]

Hello, do you know if this will work in a form in Squarespace? Squarespace has a form with a dropdown menu as an option, but I want the drop down menu to be searchable so when you start typing the dropdown menu will only display the words with those characters.

[@vyvy3130]

Thanks you!

[@HeroXI880]

bro what if we want to add icons on the drop down, can u please tell ?

[@megcodm8961]

hey brother please help,i want to make a dropdown list on a navigation bar what do i do cuz whenever i make a div class its not working as it is insider the header section

[@suyashman7964]

Epic bro

[@xarloz3248]

what if i want to change the size all in all?

[@hameeeed5992]

Thanks

[@birgersandman2662]

Thanks bro

[@alonneintokyo1821]

he is a man of code

[@Khodepp]

Hi can you tell me how can I move the drop-down menu to left(left of the button) it only goes right

[@user-mo6yo4kz1m]

in .dropdown a{ } try using display:inline-block;

[@user-mo6yo4kz1m]

it says the video was released 9 days ago and yalls comments are months old 💀

[@Yumiesthetic]

it was unlisted then went to public again according to some comment

[@mephistergt3614]

Lol yea, I saw comments 5 months ago but the video is uploaded 2 month ago 😂

[@itzyuzuruclips]

Damm

[@jidanmaulanas.103]

Thanks sir🫡

[@yasotube]

Didn't know that 😅

[@CầnbiếtKo-k5i]

tao không hiểu tiếng anh

[@minicinnibun]

i luv u

[@ΕγωΕγω-ρ6ω]

,👌👌👌👌👌👌👌👌👌👌👌👌👌👍👍👍👏👏

[@pjunior6865]

thanks