Learn CSS dropdown menus in 6 minutes! 🔻

#CSS #course #tutorial
CSS HTML dropdown menu tutorial example explained

[@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%);
}

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

[@Blueperry1512]

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

[@okhakhugaruba8551]

Thank you for this lecture. It really helped me ❤

[@khalidelgazzar]

Great lesson. Thank you

[@_izro_]

Best Explanation Love From Pakistan

[@jgiixom]

Bro, u r the best!

[@mariafortes1133]

Thanks for the video!

[@vyvy3130]

Thanks you!

[@cs8529]

Thanks for sharing 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

[@daru3112]

thank you bro God bless

[@DubZinio]

ty so much dude lu

[@mitskifan2003]

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!!

[@suyashman7964]

Epic bro

[@hameeeed5992]

Thanks

[@ruzalshrestha1998]

God bless u

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

[@pjunior6865]

thanks

[@HeroXI880]

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

[@xarloz3248]

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

[@birgersandman2662]

Thanks bro

[@alonneintokyo1821]

he is a man of code

[@jidanmaulanas.103]

Thanks sir🫡

[@minicinnibun]

i luv u

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

[@yasotube]

Didn't know that 😅

[@user-wz9fo1eg1q]

tao không hiểu tiếng anh

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

[@user-sr9nh3lc2x]

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