CSS Dropdowns

← Previous Next →

CSS is used to design OR create a hoverable drop-down menus.

Create Dropdowns using CSS & HTML

• A dropdowns menu is a list of links.
• Create a dropdowns menu using only HTML & CSS.
• A dropdowns menu is the best way to organize listing by category.

Without CSS Dropdown Look

<ul> <li><a>First_dropdown</a> <ul> <li><a href="#">Link_1</a></li> <li><a href="#">Link_2</a></li> <li><a href="#">Link_3</a></li> <li><a href="#">Link_4</a></li> </ul> </li> </ul>

Output

• First_dropdown
  • Link_1
  • Link_2
  • Link_3
  • Link_4

Dropdown Menu

A dropdown menu that allows the user to choose an option from a list. We can design a dropdown menu by using CSS style properties:

Example of Dropdown Menu

.drop_botton { background-color: #003B4D; color: #fff; padding: 10px; font-size: 15px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .drop_link { background-color: #f9f9f9; min-width: 160px; position: absolute; display: none; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; border: 1px solid #003B4D; } .drop_link a:hover { background-color: #f1f1f1; border: 1px solid #003B4D; } .dropdown:hover .drop_link { display: block; } .dropdown:hover .drop_botton { background-color: #3e8e41; }

Output

← Previous Next →