Use Dropdown in CSS

The Dropdown effect is mainly used with navigation menus as an indispensable solution in website design, especially websites with a large number of indexes, cannot be arranged entirely on the interface.

In this article, TipsMake.com will work with you to create lists / drop down menus when hovering over a certain element using CSS.

Basic dropdown box

Create a dropdown box that appears when the user moves the mouse over an element.

Css

.dropdown {
 position: relative;
 display: inline-block;
}

.dropdown-content {
 display: none;
 position: absolute;
 background-color: #e9d8f4;
 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;
}

Dropdown Menu

Create a drop-down menu that allows users to select an option from the list. This is an indispensable solution in website design, especially websites with a large number of indexes, can not be arranged entirely on the interface.

css


.dropbtn {
 background-color: #58257b;
 color: white;
 font-weight: bold;
 padding: 16px;
 font-size: 16px;
 border: none;
 cursor: pointer;
}


.dropdown {
 position: relative;
 display: inline-block;
}

.dropdown-content {
 display: none;
 position: absolute;
 background-color: #e9d8f4;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
}

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

.dropdown-content a:hover {
 background-color: #58257b;
 color: white;
}

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

.dropdown:hover .dropbtn {
 background-color: #984eca;
}

Align drop content

If you want the menu bar to drop down in the right to left direction instead of left to right, you can add the right: 0 attribute.

 .dropdown-content { 
 right: 0; 
 }

For example :

.dropbtn {
 background-color: #58257b;
 color: white;
 padding: 16px;
 font-size: 16px;
 border: none;
 cursor: pointer;
}

.dropdown {
 position: relative;
 display: inline-block;
}

.dropdown-content {
 display: none;
 position: absolute;
 right: 0;
 background-color: #e9d8f4;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
}

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

.dropdown-content a:hover {
 background-color: #58257b;
 color: white;
}

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

.dropdown:hover .dropbtn {
 background-color: #984eca;
}

Photo Dropdown

Add images and other content in the drop down box.

css

.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);
 z-index: 1;
}

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

.desc {
 padding: 15px;
 text-align: center;
}

Dropdown navigation bar

Add a drop-down menu inside the navigation bar - navigation bar.

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #58257b;
}

li {
 float: left;
}

li a, .dropbtn {
 display: inline-block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
 background-color: #ce3e6e;
 color: white;
 font-weight: bold;
}

li.dropdown {
 display: inline-block;
}

.dropdown-content {
 display: none;
 position: absolute;
 background-color: #e9d8f4;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
}

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

.dropdown-content a:hover {
 background-color: #db7093;
 color: white;
}

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