Dropdown Menu: Use Dropdown in CSS

Dropdown Menu: Use Dropdown in CSS is easier to understand when the core ideas are paired with practical examples. The sections below explain the topic clearly, highlight useful steps, and point out details that can prevent common errors.

This guide, 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 instance,:

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