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 ❤

[@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.

[@Spacetime23]

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

[@Honda4Ever]

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

[@ThomasIkemann]

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

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

[@zahid1909]

You are a real Master, bro! Respect!!

[@_izro_]

Best Explanation Love From Pakistan

[@jgiixom]

Bro, u r the best!

[@tomyshalpy]

simple explantion thank you

[@mariafortes1133]

Thanks for the video!

[@RAKibHasan_351]

Thanks bro very helpful

[@khalidelgazzar]

Great lesson. Thank you

[@kavishkaimalsha9230]

Grate video and thank you so much

[@iopyrb]

nice and simple 🔥

[@MitDass]

Why the paragraph disappeared at the end?

[@okhakhugaruba8551]

Thank you for this lecture. It really helped me ❤

[@RickWoellert]

Nice Video.

[@eulersosa6840]

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

[@RileyHighBerg]

Code or tutorial for ascending and descending for table? You dont have any tutorial for it

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

[@xarloz3248]

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

[@taufiqhussain7837]

Good👍 website img animation

[@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.

[@HeroXI880]

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

[@cs8529]

Thanks for sharing Bro.

[@daru3112]

thank you bro God bless

[@kell3rgeist]

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

[@kineabmetasbia3021]

THE BEST THERE IS

[@pyitheinkyawpyitheinkyaw]

thank a lot sir .

[@DubZinio]

ty so much dude lu

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

[@ruzalshrestha1998]

God bless u

[@suyashman7964]

Epic bro

[@motivationda2067]

thank you

[@CharlesWarugu]

Be blessed

[@birgersandman2662]

Thanks bro

[@alonneintokyo1821]

he is a man of code

[@hameeeed5992]

Thanks

[@offline-_-]

Thx

[@vyvy3130]

Thanks you!

[@yasotube]

Didn't know that 😅

[@CầnbiếtKo-k5i]

tao không hiểu tiếng anh

[@jidanmaulanas.103]

Thanks sir🫡

[@minicinnibun]

i luv u

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

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

[@commangyan8787]

His voice I don't like it

[@pjunior6865]

thanks