CSS Dropdowns

CSS dropdowns are interactive elements commonly used in web design to create navigation menus or select options within a website. A dropdown menu typically appears as a list of options that becomes visible when the user hovers over or clicks on a specific trigger element, such as a button or link.

In CSS, dropdown menus are typically created using a combination of HTML and CSS. Here's a basic example of how you might create a simple dropdown menu:

Example

<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>
  <a href="#">Link 4</a>
  </div>
</div>
</pre>

You can click on above box to edit the code and run again.

Output

Link 1 Link 2 Link 3 Link 4

Example:Adding CSS property in HTML structure to create interactive drop-down structure.

Example

  .dropbtn {
  background-color: green;
  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);
  z-index: 1;
}

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

You can click on above box to edit the code and run again.

Output

Right-aligned Dropdown Content

To create a right-aligned dropdown content, you can modify the CSS styles accordingly. Here's an example:

Example

.dropdown-content {
  right: 0;
}

You can click on above box to edit the code and run again.

Output

Dropdown Image

A dropdown image, in the context of web development, typically refers to a graphical element displayed within a dropdown menu. Instead of plain text options, a dropdown image menu might present users with a selection of images to choose from.

Here's an example of how you might create a dropdown image menu using HTML and CSS:

Example

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

You can click on above box to edit the code and run again.

Output

Dropdown Text

Move the mouse over the text below to open the dropdown content.

Example

.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;
}
<body>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div&t;
</div>
</body>

You can click on above box to edit the code and run again.