CSS Dropdowns


🔹 What is a CSS Dropdown?

A CSS Dropdown is a navigational element that reveals hidden content (such as links or options) when hovered over or clicked. It's commonly used in menus, toolbars, or forms.

Dropdowns are typically made using HTML and styled/controlled using CSS and optionally JavaScript for interactivity.


🔸 Basic HTML Structure

<div class="dropdown">
  <button class="dropbtn">Menu</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

🔸 CSS for Dropdown Menu

/* Button styling */
.dropbtn {
  background-color: #3498db;
  color: white;
  padding: 12px;
  font-size: 16px;
  border: none;
}

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

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

/* Dropdown links */
.dropdown-content a {
  color: black;
  padding: 12px;
  text-decoration: none;
  display: block;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Button hover effect */
.dropdown:hover .dropbtn {
  background-color: #2980b9;
}

🔸 Types of Dropdowns

  • Hover Dropdown – Displays on mouse hover

  • Click Dropdown – Displays on click (needs JavaScript)

  • Nested Dropdown – Dropdown inside another dropdown

  • Form Dropdown – Select element styled with CSS


🔸 Nested Dropdown Example (Simple)

<div class="dropdown">
  <button class="dropbtn">More</button>
  <div class="dropdown-content">
    <a href="#">Sub 1</a>
    <div class="dropdown">
      <a href="#">Submenu ▸</a>
      <div class="dropdown-content">
        <a href="#">Sub 1.1</a>
        <a href="#">Sub 1.2</a>
      </div>
    </div>
  </div>
</div>

Note: Nested dropdowns usually need extra styling or JS for usability.


Practice Questions

✅ Write CSS for the following:

Q1. Create a dropdown menu that appears on hover.

Q2. Add a button that changes color on hover.

Q3. Make the dropdown content appear below the button.

Q4. Style the dropdown links with padding and borders.

Q5. Add a shadow effect to the dropdown box.

Q6. Create a vertical dropdown instead of horizontal.

Q7. Add a nested submenu in a dropdown.

Q8. Customize font and spacing in the dropdown items.

Q9. Add a dropdown inside a navigation bar.

Q10. Convert dropdown to appear on click using JS (optional).


Go Back Top