CSS Drop-Down Menu

Use CSS to create an effect that displays the drop-down menu after the mouse moves up.

Drop-down Menu Example

Example

image.png

Basic Drop-Down Menu

When the mouse moves over the specified element, a drop-down menu will appear.

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 the mouse to me! </span>
   <div class="dropdown-content">
     <p>Tutorial Fish</p>
     <p>www.tutorialfish.com</p>
   </div>
</div>

 Try It! 

Analysis

HTML part:

We can use any HTML element to open the drop-down menu, such as: <span>, or a <button> element.

Use container elements (such as: <div>) to create the content of the drop-down menu and place it wherever you want.

Use <div> elements to wrap these elements, and use CSS to style the drop-down content.

CSS part:

.dropdown Class use position:relative, this will set the content of the drop-down menu in the lower right corner of the drop-down button (use position:absolute).

.dropdown-content In the class is the actual drop-down menu. It is hidden by default and will be displayed after the mouse moves to the specified element. Note that min-width, the value is set to 160px. You can modify it if you want. 

Note: If you want to set the contents of the drop-down, and drop-down button width consistently that can be set width to 100% ( overflow:auto, can scroll on small size of the screen).

We use the box-shadow property to make the drop-down menu that looks like a "card."

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

Drop-Down Menu

Create a drop-down menu and allow the user to select an item in the list:

image.png

This example is similar to the previous example, when we add a link to the drop-down list and set the style:

Example

<style>
.dropbtn {
    background-color: #177cb0;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.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);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #177cb0;
}
</style>
</head>
<body>

<h2>Dropdown menu</h2>
<p>Move the mouse over the button to open the drop-down menu. </p>

<div class="dropdown">
  <button class="dropbtn">drop-down menu</button>
  <div class="dropdown-content">
    <a href="//www.tutorialfish.com">Tutorial 1</a>
    <a href="//www.tutorialfish.com">Tutorial 2</a>
    <a href="//www.tutorialfish.com">Tutorial 3</a>
  </div>
</div>

 Try It! 

Drop-Down Content Alignment

image.png

If you want to set the content direction of the right-floating drop-down menu to be from right to left instead of from left to right, you can add the following code right: 0;

Example

.dropdown-content {
     right: 0;
}

 Try It! 

More Examples

Picture drop down - This example demonstrates how to add pictures to the drop-down menu.

Navigation bar drop down - This example demonstrates how to add a drop-down menu on the navigation bar.