-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
CSS Basics
CSS Styling Properties
CSS Box Model
CSS Margin
CSS Padding
CSS Borders
CSS Outline
CSS Height/Width
CSS Max-width
CSS Display
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Box Sizing
CSS Text
CSS Fonts
CSS Icons
CSS Text Effects
CSS Web Fonts
CSS Colors
CSS Backgrounds
CSS Color Keywords
CSS Gradients
CSS Shadows
CSS Links
CSS Lists
CSS Tables
CSS Advanced Selectors & Features
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Attribute Selectors
CSS Specificity
CSS !important
CSS Units
CSS Variables
CSS @property
CSS Math Functions
CSS Media and Image Styling
CSS Image Styling
CSS Image Centering
CSS Image Filters
CSS Image Shapes
CSS object-fit
CSS object-position
CSS Masking
CSS Layout Techniques
CSS Website Layout
CSS Navigation Bar
CSS Dropdowns
CSS Image Gallery
CSS Counters
CSS Pagination
CSS Multiple Columns
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)
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.
<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>
/* 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;
}
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
<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.
✅ 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 Basics
CSS Styling Properties
CSS Box Model
CSS Margin
CSS Padding
CSS Borders
CSS Outline
CSS Height/Width
CSS Max-width
CSS Display
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Box Sizing
CSS Text
CSS Fonts
CSS Icons
CSS Text Effects
CSS Web Fonts
CSS Colors
CSS Backgrounds
CSS Color Keywords
CSS Gradients
CSS Shadows
CSS Links
CSS Lists
CSS Tables
CSS Advanced Selectors & Features
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Attribute Selectors
CSS Specificity
CSS !important
CSS Units
CSS Variables
CSS @property
CSS Math Functions
CSS Media and Image Styling
CSS Image Styling
CSS Image Centering
CSS Image Filters
CSS Image Shapes
CSS object-fit
CSS object-position
CSS Masking
CSS Layout Techniques
CSS Website Layout
CSS Navigation Bar
CSS Dropdowns
CSS Image Gallery
CSS Counters
CSS Pagination
CSS Multiple Columns
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)