Loading lesson path
Concept visual
Start at both ends
Overview
CSS dropdowns are used to display a list of options or content when a user clicks or hover over an element, like a button or a navigation link.
Formula
A CSS dropdown consists of a trigger element (like < div >, < button >, < p >, < a >, etc.).
When the trigger element is clicked or hovered over, the dropdown content will be displayed.The dropdown content is a container element (e.g. <div>) that holds the hidden content (can be text, links, images, etc.). Mouse over the three CSS dropdown examples below:
Hello World!
Formula
Here, we create a dropdown box with some text, that appears when the user mouses over a < div > element.<style>.dropdown {
position: relative;
}.dropdown-content {display:
none;
position: absolute;
background-color: #f9f9f9;
min-width: 130px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);padding:
12px 16px;
}.dropdown:hover.dropdown-content {
display: block;
}</style> <div class="dropdown">Mouse over me!
Formula
< div class ="dropdown - content"> Hello World!</div ></div>
The .dropdown class uses position:relative, which is needed when we want the dropdown content to be placed right below the trigger element (the dropdown content will use position:absolute ).
Formula
The .dropdown - content class holds the dropdown content. It is hidden by default, and will be displayed on hover.The min-width property is set to 130px. Feel free to change this! If you want the width of the dropdown content to be as wide as the trigger element, set width to 100% and overflow:auto to enable scroll on small screens.
Formula
Instead of using a border, we use the box - shadow property to make the dropdown content look like a "card".Formula
:hover selector is used to show the dropdown content when the user mouses over the < div class ="dropdown"> element.Create a dropdown menu that allows the user to choose an option from a list:
This example is similar to the previous one, except that we add a button and links inside the dropdown box and style them to fit the dropdown button:
<style>.dropdown {
position: relative;
}
/* Style the dropdown button */.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown content */.dropdown-content {
display: none;position:
absolute;
background-color: #f9f9f9;
min-width: 200px;Formula
box - shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside dropdown content */.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */.dropdown-content a:hover {Formula
background - color: #f1f1f1}
/* Show the dropdown content on hover */.dropdown:hover .dropdown-content {
display: block;
}
/* Change background color of dropdown button on hover */.dropdown:hover .dropbtn {
background-color: #3e8e41;
}</style> <div class="dropdown"> <button class="dropbtn">Dropdown Menu</button>
Formula
< div class ="dropdown - content"><a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>