• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Dropdowns

← Previous Next →

🔹 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).

CSS Dropdowns Quiz

Q1: What CSS property is used to hide the dropdown by default?

A. visibility: hidden;
B. display: none;
C. opacity: 0;
D. overflow: hidden;

Q2: Which property is needed to stack dropdown content over other elements?

A. position: relative;
B. z-index:
C. float: left;
D. margin-top: 0;

Q3: How do you position dropdown content?

A. position: absolute;
B. position: fixed;
C. position: relative;
D. display: flex;

Q4: How to trigger a dropdown on hover in CSS?

A. :active
B. .dropdown:hover .dropdown-content
C. .dropdown:focus
D. onhover()

Q5: What does box-shadow add to a dropdown?

A. Border
B. Shadow effect
C. Padding
D. Margin

Q6: What tag is commonly used for a dropdown button?

A. <div>
B. <button>
C. <a>
D. <label>

Q7: To make dropdown content visible, which property is modified?

A. opacity
B. display
C. visibility
D. width

Q8: What is the benefit of using position: relative; on the dropdown parent?

A. Anchors the absolute child to the parent
B. Hides overflow
C. Adds scrollbars
D. Removes padding

Q9: Can dropdowns be made responsive?

A. No
B. Yes, using media queries
C. Only in Flexbox
D. Only in JavaScript

Q10: Which is the correct way to hide dropdown when not hovered?

A. visibility: hidden;
B. opacity: 0;
C. display: none;
D. z-index: -1;
← Previous Next →
Login
Go Back Top