CSS Dropdown Menu

Create a dropdown menu effect using CSS that displays when the mouse is moved over it.

Dropdown Menu Example

Example Demonstration 1

tutorialpro.org

www.tutorialpro.org

Example Demonstration 2

Example Demonstration 3

Basic Dropdown Menu

A dropdown menu appears when the mouse is moved over a specified element.

Example

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  <span>Move your mouse over me!</span>
  <div class="dropdown-content">
    <p>tutorialpro.org</p>
    <p>www.tutorialpro.org</p>
  </div>
</div>

Example Analysis

HTML Part:

Any HTML element can be used to open the dropdown menu, such as: <span>, or a <button> element.

Use a container element (like: <div>) to create the dropdown menu content and place it wherever you want.

Wrap these elements with a <div> element and use CSS to style the dropdown content.

CSS Part:

The .dropdown class uses position:relative, which sets the dropdown content to be positioned at the bottom right of the dropdown button (using position:absolute).

The .dropdown-content class contains the actual dropdown menu, which is hidden by default and displayed when the mouse is moved over the specified element. Note that min-width is set to 160px. You can modify it as you like. Note: If you want the dropdown content to match the width of the dropdown button, set width to 100% (overflow:auto allows scrolling on small screens).

We use the box-shadow property to make the dropdown menu look like a "card".

The :hover selector is used to display the dropdown menu when the user moves the mouse over the dropdown button.

Dropdown Menu

Create a dropdown menu and allow the user to select an item from the list:

This example is similar to the previous one, but we added links in the dropdown list and set their styles:

Example

<style>
/* Dropdown button style */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Container <div> - 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: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Dropdown menu links */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Change dropdown menu link color on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Change dropdown button background color when dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<style>background-color: #3e8e41;}</style><div class="dropdown">  <button class="dropbtn">Dropdown Menu</button>  
  <div class="dropdown-content">    <a href="#">tutorialpro.org 1</a>    
    <a href="#">tutorialpro.org 2</a>    <a href="#">tutorialpro.org 3</a>  </div></div>

Dropdown Content Alignment

float:left;

float:right;

If you want to set the dropdown menu content to float right and have the direction from right to left instead of left to right, you can add the following code right: 0;

Example

.dropdown-content {    right: 0;}

More Examples

Image Dropdown

Navbar Dropdown ```