Wapka Official Forum

CSS Dropdowns


Create a hoverable dropdown with CSS.

Demo: Dropdown Examples
Move the mouse over the examples below:



Dropdown Text

Hello World!





Dropdown Menu

Link 1
Link 2
Link 3





Other:



Beautiful Cinque Terre







Basic Dropdown
Create a dropdown box that appears when the user moves the mouse over an
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;  z-index: 1;}.dropdown:hover
.dropdown-content {  display: block;}</style>
<div class="dropdown">
  <span>Mouse over me</span> 
<div class="dropdown-content">    <p>Hello World!</p>  </div></div>
Try it Yourself »

Example Explained
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.
CSS) 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 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 CSS box-shadow property to make the
dropdown menu look like a "card".
The :hover selector is used to show the dropdown menu when the user moves the
mouse over the dropdown button.







Dropdown Menu
Create a dropdown menu that allows the user to choose an option from a list:

Dropdown Menu

Link 1
Link 2
Link 3


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:

Example

<style>/* Style The Dropdown Button */.dropbtn { 
background-color: #4CAF50;  color: white; 
padding: 16px;  font-size: 16px; 
border: none;  cursor: pointer;}/* The
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);  z-index: 1;}/* Links inside the dropdown */
.dropdown-content a {  color: black;  padding: 12px 16px;  text-decoration: none;
 
display: block;}/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}/* Show the
dropdown menu on hover */.dropdown:hover .dropdown-content { 
display: block;}/* Change the background color of the dropdown
button when the 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>
Try it Yourself »


Right-aligned Dropdown Content

Left

Link 1
Link 2
Link 3



Right

Link 1
Link 2
Link 3



If you want the dropdown menu to go from right to left, instead of left to right, add right: 0;

Example

.dropdown-content {  right: 0;}
Try it Yourself »


More Examples

Dropdown Image
How to add an image and other content inside the dropdown box.

Hover over the image:




Beautiful Cinque Terre



Try it Yourself »


Dropdown Navbar
How to add a dropdown menu inside a navigation bar.



Try it Yourself »













★
+1

Reference: https://www.w3schools.com/css/css_dropdowns.asp