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 🙏

[@suyashman7964]

Epic bro

[@_izro_]

Best Explanation Love From Pakistan

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

[@jgiixom]

Bro, u r the best!

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

[@mariafortes1133]

Thanks for the video!

[@zahid1909]

You are a real Master, bro! Respect!!

[@daru3112]

thank you bro God bless

[@cs8529]

Thanks for sharing Bro.

[@nesifims3158]

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

[@vyvy3130]

Thanks you!

[@ThomasIkemann]

04:50 I did not know you can do something like that, 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.

[@hameeeed5992]

Thanks

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

[@xarloz3248]

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

[@DubZinio]

ty so much dude lu

[@mitskifan2003]

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

[@ruzalshrestha1998]

God bless u

[@pjunior6865]

thanks

[@birgersandman2662]

Thanks bro

[@alonneintokyo1821]

he is a man of code

[@jidanmaulanas.103]

Thanks sir🫡

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

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

[@yasotube]

Didn't know that 😅

[@user-wz9fo1eg1q]

tao không hiểu tiếng anh

[@minicinnibun]

i luv u