CSS Dropdowns
A CSS dropdown reveals a list of options or other content once the user clicks or hovers over an element, such as a button or a navigation link.
Two parts make it work. First comes a trigger element (like <div>, <button>, <p>, <a>, etc.), the thing the user clicks or hovers over.
Second comes the dropdown content: a container element (e.g. <div>) holding hidden material, which can be text, links, images, etc., until the trigger displays it.
CSS Dropdown Box with Text
In this first version, mousing over a <div> element brings up a dropdown box that holds some text.
Dropdown box with text
Prompt
Create a CSS dropdown box with text content. Use a container div with class "dropdown" that contains the text "Mouse over me!" as a trigger. Inside it, place a hidden div with class "dropdown-content" containing the text "Hello World!". The dropdown container should use position: relative. The dropdown content should be hidden by default (display: none), use position: absolute, have a light gray background (#f9f9f9), a minimum width of 130px, a box-shadow of 0px 8px 16px 0px rgba(0,0,0,0.2), and padding of 12px 16px. On hover of the dropdown container, the dropdown content should become visible (display: block).
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Dropdown Box with Text</title>
<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>
</head>
<body>
<h2>Dropdown Text</h2>
<p>Mouse over the text below to see the dropdown content.</p>
<div class="dropdown">Mouse over me!
<div class="dropdown-content">Hello World!</div>
</div>
</body>
</html>
Example Explained
- For the dropdown content, which uses
position:absolute, to land right below the trigger element, the.dropdownclass needsposition:relative. - Dropdown content lives in the
.dropdown-contentclass, hidden by default until a hover displays it. - A
min-widthof 130px is set here, and you are free to change it! To match the width of the trigger element, usewidthat 100%, plusoverflow:autoso that small screens can scroll. - The "card" look of the dropdown content comes from the
box-shadowproperty, used in place of a border. - Finally, the
:hoverselector reveals the dropdown content once the user mouses over the dropdown<div>element.
CSS Dropdown Menu
A dropdown menu lets the user pick one option from a list of choices.
It builds on the previous example, and the only difference is a button plus links placed in the dropdown box, all styled to suit the dropdown button.
Dropdown menu with button
Prompt
Create a CSS dropdown menu with a button trigger. Use a container div with class "dropdown" (position: relative). Inside it, place a button with class "dropbtn" labeled "Dropdown Menu" styled with a green background (#4CAF50), white text, 16px padding, 16px font size, no border, and cursor pointer. Below the button, add a hidden div with class "dropdown-content" (display: none, position: absolute, background-color: #f9f9f9, min-width: 200px, box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)) containing three links: "Link 1", "Link 2", and "Link 3". Style the links with black color, 12px 16px padding, no text-decoration, and display: block. On link hover, apply a light gray background (#f1f1f1). On hovering the dropdown container, show the dropdown content (display: block) and change the button background to a darker green (#3e8e41).
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Dropdown Menu</title>
<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;
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 {
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>
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Mouse over the button to see the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown Menu</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>