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.
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.
Required fields are marked *
Get all latest content delivered to your email free.