- How TO — Clickable Dropdown
- Dropdown
- Create a Clickable Dropdown
- Example
- Example Explained
- Example
- Example Explained
- Example
- 26 CSS Dropdown Menus
- Related Articles
- Author
- Links
- Made with
- About a code
- Dropdown Dark/Light
- Author
- Links
- Made with
- About a code
- Gooey Dropdown Menu
- Author
- Links
- Made with
- About a code
- Drop Down Menu
- Author
- Links
- Made with
- About a code
- Navigation with Sub-Navigation
- Author
- Links
- Made with
- About a code
- Pure CSS Dropdown Menu
- Author
- Links
- Made with
- About a code
- The More Menu
- Author
- Links
- Made with
- About the code
- Drop Down Menu
- Author
- Links
- Made with
- About the code
- Molten Menu
- Author
- Links
- Made with
- About the code
- HTML & CSS Dropdown Menu
- Author
- Links
- Made with
- About the code
- Gradient Menu
- Author
- Links
- Made with
- About the code
- Main Menu
- Author
- Links
- Made with
- About the code
- CSS Menu
- Author
- Links
- Made with
- About the code
- CSS Dropdown Menu
- Author
- Links
- Made with
- About the code
- Horizontal Dropdown Menu
- Author
- Links
- Made with
- About the code
- Dropdown Menu
- Author
- Links
- Made with
- About the code
- Fancy Menu
- Author
- Links
- Made with
- About the code
- Recursive Hover Navigation
- Author
- Links
- Made with
- About the code
- Cool Dropdown Menu Effects
- Author
- Links
- Made with
- About the code
- CSS Dropdown Menu
- Author
- Links
- Made with
- About the code
- Dropdown Menu
- Author
- Links
- Made with
- About the code
- Simple Pure CSS Dropdown Menu
- Author
- Links
- Made with
- About the code
- Simple Pure CSS Dropdown Menu
- Author
- How TO — Hoverable Dropdown
- Dropdown
- Create A Hoverable Dropdown
- Example
- Example Explained
- Example
- Example Explained
- HTML Drop-down Menu – How to Add a Drop-Down List with the Select Element
- How to Create an HTML Dropdown List
- How to Create a Hover-able Drop-down Menu
- Wrapping Up
How TO — Clickable Dropdown
Learn how to create a clickable dropdown menu with CSS and JavaScript.
Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:
Create a Clickable Dropdown
Create a dropdown menu that appears when the user clicks on a button.
Step 1) Add HTML:
Example
Example Explained
Use any element to open the dropdown menu, e.g. a , or
element.
Use a container element (like ) to create the dropdown menu and add the dropdown links inside it.
Wrap a element around the button and the to position the dropdown menu correctly with CSS.
Step 2) Add CSS:
Example
/* Dropdown Button */
.dropbtn background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
>
/* The container — needed to position the dropdown content */
.dropdown position: relative;
display: inline-block;
>
/* Dropdown Content (Hidden by Default) */
.dropdown-content display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>
/* Links inside the dropdown */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>
/* Change color of dropdown links on hover */
.dropdown-content a:hover
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show
Example Explained
We have styled the dropdown button with a background-color, padding, hover effect, etc.
The .dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).
The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).
Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a «card». We also use z-index to place the dropdown in front of other elements.
Step 3) Add JavaScript:
Example
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() document.getElementById(«myDropdown»).classList.toggle(«show»);
>
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) if (!event.target.matches(‘.dropbtn’)) var dropdowns = document.getElementsByClassName(«dropdown-content»);
var i;
for (i = 0; i < dropdowns.length; i++) var openDropdown = dropdowns[i];
if (openDropdown.classList.contains(‘show’)) openDropdown.classList.remove(‘show’);
>
>
>
>
26 CSS Dropdown Menus
Collection of hand-picked free HTML and CSS dropdown menu code examples from codepen and other resources. Update of July 2019 collection. 9 new items.
Related Articles
Author
Links
Made with
About a code
Dropdown Dark/Light
Pure CSS dropdown dark/light.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Gooey Dropdown Menu
Compatible browsers: Chrome, Edge, Opera, Safari
Author
Links
Made with
About a code
Drop Down Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Navigation with Sub-Navigation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Pure CSS Dropdown Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
The More Menu
Using clip-path times two to make an irregular shaped object fill out a cut-out shape in an unfold open menu effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Drop Down Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Molten Menu
This combines a CSS drop down menu, and the oozing effects of liquid flame.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
HTML & CSS Dropdown Menu
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About the code
Gradient Menu
Responsive gradient dropdown menu.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About the code
Main Menu
Horizontal menu with dropdown effects in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
CSS Menu
No JS — be sure to check out the mobile menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
CSS Dropdown Menu
HTML and CSS dropdown menu with nice effect.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About the code
Horizontal Dropdown Menu
Pure CSS horizontal dropdown menu with nice transitions and beautiful palette.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Dropdown Menu
Cool HTML & CSS dropdown menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Fancy Menu
Fancy dropdown menu in HTML and CSS. Inspired by https://dribbble.com/shots/1075480-Ui-Kit-Hotel
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Recursive Hover Navigation
Only CSS recursive hover nav.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Cool Dropdown Menu Effects
Cool dropdown menu pure CSS effects.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
CSS Dropdown Menu
Full CSS dropdown navigation. Drops down on click by the use of a hidden checkbox.
Author
Links
Made with
About the code
Dropdown Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Simple Pure CSS Dropdown Menu
Menu with dropdown made only in CSS, with a line that follow the hover on the line.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Simple Pure CSS Dropdown Menu
Simple, sleek looking dropdown menu effect achieved using pure CSS. Simple functionality, method can be extended to create a secondary dropdown block with few edits.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
How TO — Hoverable Dropdown
Learn how to create a hoverable dropdown menu with CSS.
Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:
Create A Hoverable Dropdown
Create a dropdown menu that appears when the user moves the mouse over an element.
Step 1) Add HTML:
Example
Example Explained
Use any element to open the dropdown menu, e.g. a , or
element.
Use a container element (like ) to create the dropdown menu and add the dropdown links inside it.
Wrap a element around the button and the to position the dropdown menu correctly with CSS.
Step 2) Add CSS:
Example
/* Dropdown Button */
.dropbtn background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
>
/* The container — needed to position the dropdown content */
.dropdown position: relative;
display: inline-block;
>
/* Dropdown Content (Hidden by Default) */
.dropdown-content display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>
/* Links inside the dropdown */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>
/* Change color of dropdown links on hover */
.dropdown-content a:hover
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn
Example Explained
We have styled the dropdown button with a background-color, padding, etc.
The .dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).
The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).
Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a «card». We also use z-index to place the dropdown in front of other elements.
The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.
HTML Drop-down Menu – How to Add a Drop-Down List with the Select Element
Joel Olawanle
Many websites, applications, and web pages use drop-down menus to help display a list of information. You can use them to create navigation menus, options for forms, and more.
If you’re looking at some of these menus or lists, you might imagine how complex creating them could be. And yes – in some cases, it gets a little bit complex.
A drop-down menu is a list of options that gets revealed vertically when a user interacts with the menu by either clicking on it or hovering over it with their cursor.
This menu also disappears when the user stops interacting with the menu by clicking again or taking the cursor away from the menu.
In this article, you will learn how to add a drop-down list to the select element on your webpage. You’ll also learn the various options available, and how to create a hoverable drop-down list/menu.
How to Create an HTML Dropdown List
In HTML, by default, you can always create a drop-down list with the select tag alongside the option tag. This is mainly used within forms to select a value from a list of many options.
The select tag has two primary attributes: the name and id attributes.
You use the name attribute to identify the drop-down when a selection is submitted in a form. You can connect the id attribute to a label that has similar values to its for attribute.
The select tag also has some optional boolean attributes like disabled (which disables the select fields), required (which makes the field required in a form), and lots more.
Within the select tag, you can add many options in the individual option tag. The option tag has an attribute of value that specifies a value that is submitted from the form when an option gets selected.
There are other boolean attributes like disabled (which disables the option in the menu), and selected (which you use to set a particular option as the default selected option when the page loads rather than the first option).
In the above code, the first option has an attribute of disabled , meaning you will not be able to select the option. The fourth option has an attribute of selected , meaning that instead of having JavaScript as the selected value by default, Java will be selected.
How to Create a Hover-able Drop-down Menu
When you scroll through or visit many advanced and modern webpages, you will notice that they have drop-down menus.
These menus are used for navigation to help hold similar links together. Most times, when you hover on the parent menu, then the drop-down list appears.
You can create these types of menues in various ways, as there is no direct syntax to build one.
You can create this using CSS styling to show and hide the drop-down list when the user hovers over the menu. A very good approach is to create a div that holds the menu and the drop-down.
This div serves as a container and you can style it to a position of relative and display of inline-block , so the drop-down options appear below the menu.
You can style your button and the dropdown-options however you wish. But the major style that controls the hover effect, by default, sets the dropdown-options not to display. Then when a mouse hovers over the menu, the display is not set to block , so the options are visible. You also set the position to absolute , so the options appear below the menu, and overflow to auto to enable scroll on small screens.
.dropdown-options < display: none; position: absolute; overflow: auto; >.dropdown:hover .dropdown-options
In the demo below, we add more styling to make the drop-down menu more attractive and nice:
Wrapping Up
In this article, you have learned how to create a drop-down list with the select tag. You’ve also learned how to create the hoverable drop-down menu with CSS to handle the hover effect.