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
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>
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:
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>
Drop-Down Content Alignment
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; }
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.