Learn CSS dropdown menus in 6 minutes! 🔻

Показать описание

#CSS #course #tutorial

CSS HTML dropdown menu tutorial example explained

Рекомендации по теме

Комментарии

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bro Code</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="dropdown">
<button>Food</button>
<div class="content">
<a href="">Apple</a>
<a href="">Orange</a>
<a href="">Banana</a>
</div>
</div>

</body>
</html>

/* 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%);
}

BroCodez

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

HondaEver

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

Blueperry

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

Spacetime

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

smartgadgets

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.

mswondo

Thank you for this lecture. It really helped me ❤

okhakhugaruba

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

HeroXI

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

ThomasIkemann

You are a real Master, bro! Respect!!

zahid

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.

danielleburchett

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

xarloz

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

megcodm

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

Khodepp

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

moyokzm

Learn CSS dropdown menus in 6 minutes! 🔻

Learn CSS dropdown menus in 6 minutes! 🔻

Simple Dropdown Menu Using HTML and CSS

Pure CSS Dropdown Menu with HTML and CSS

How To Create Advanced CSS Dropdown Menus

Easiest Dropdown Hover Menu with HTML CSS Only

How To Make Drop Down Menu Using HTML And CSS

How To Make Drop Down Menu Using HTML And CSS | HTML Website Tutorials

Simple Dropdown Menu Using HTML & CSS - EASY TUTORIAL

How to Host Your Website for Free Using InfinityFree | Free Domain in 2024

How To Make A Dropdown Menu From Scratch | HTML, CSS, Javascript

How to create Dropdown Menu in HTML & CSS

How To Create Drop Down Menu In Html and CSS | DropDown Menu Tutorial

CSS Dropdown Menu Animation | Dropdown Button Animation CSS

How to Make Drop Down Menu in HTML and CSS | HTML CSS Website Tutorial | Dropdown Menu HTML CSS

How to Create an HTML Dropdown Menu | Learn HTML and CSS | HTML Tutorial | HTML for Beginners

How to Create Amazing Dropdown Menu using HTML CSS & JavaScript | Geekboots

Simple Dropdown Menu Bar using only HTML & CSS

How To Make Drop Down Menu Using HTML And CSS | Web Development Tutorial

How To Make Drop-down Profile Menu Using HTML CSS & JavaScript | Toggle Menu For Website

How to create a Dropdown Menu with Cool Transform effect using HTML CSS & JavaScript | Geekboot...

Animated Drop Menu | HTML CSS

Custom Dropdown | HTML CSS

Drop-down menu in css html

How to Create Transparent Drop Down Navigation Menu with CSS and HTML Tutorial