Demo: Dropdown Examples
Move the mouse over the examples below:
Create a dropdown box that appears when the user moves the mouse over an element.
HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element.
Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it.
Wrap a <div> element around the elements to position the dropdown content correctly with CSS.
.dropdown class use
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 content. 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 CSS3
box-shadow property to make the dropdown menu look like a "card".
:hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.
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 links inside the dropdown box and style them to fit a styled dropdown button:
Right-aligned Dropdown Content
If you want the dropdown menu to go from right to left, instead of left to right, add
How to add an image and other content inside the dropdown box.
Hover over the image:
How to add a dropdown menu inside a navigation bar.