Step 1) HTML
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:
Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element.
Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it.
Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
Step 2) Add CSS:
We have styled the dropdown button with a background-color, padding, etc.
.dropdown class uses
position:relative, which is needed when we want the dropdown content to be placed right below the dropdown button (using
.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.
:hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.
Required fields are marked *
Get all latest content delivered to your email free.