Module 52 : Creating a CSS-Only Dropdown Menu – Designing dropdowns with only CSS.
how to design a fully functional dropdown menu using only HTML and CSS, without any JavaScript.
Dropdown menus are essential UI elements, especially for navigation bars and settings menus.
focuses on:
Understanding the structure (HTML + CSS)
Building a example (step-by-step)
Exercises for deeper understanding
apply and extend your knowledge
Part 1: Understanding the Basics
What is a Dropdown Menu?
A dropdown menu is a hidden list of items that becomes visible when a user hovers or focuses on a main item (like a button or link).
Initially hidden.
Appears on hover, focus, or click.
Can be vertical or horizontal.
In CSS-only dropdowns, we use hover, focus-within, or checkbox hacks to toggle visibility.
Part 2: Building the HTML Structure
We first need a basic HTML skeleton.
html
code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS-Only Dropdown Menu</title> <link rel="stylesheet" href="styles.css"> </head> <body> <nav class="navbar"> <ul class="menu"> <li><a href="#">Home</a></li> <li class="dropdown"> <a href="#">Services</a> <ul class="dropdown-menu"> <li><a href="#">Web Design</a></li> <li><a href="#">App Development</a></li> <li><a href="#">SEO</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav> </body> </html>
Explanation:
.menu is the main navigation list.
.dropdown is a list item containing another <ul> called .dropdown-menu.
This nested <ul> contains submenu items.
Part 3: Styling with CSS
Now, we add the magic with CSS!
css
code
/* styles.css */ /* Basic Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Navbar Styling */ .navbar { background-color: #333; } .menu { list-style: none; display: flex; } .menu > li { position: relative; } .menu > li > a { display: block; padding: 15px 20px; color: white; text-decoration: none; } /* Dropdown Menu Hidden Initially */ .dropdown-menu { display: none; position: absolute; background-color: #444; top: 100%; left: 0; min-width: 180px; list-style: none; } /* Dropdown Items */ .dropdown-menu li a { padding: 12px 16px; color: white; display: block; text-decoration: none; } /* Show Dropdown on Hover */ .dropdown:hover .dropdown-menu { display: block; } /* Hover effects */ .menu li a:hover, .dropdown-menu li a:hover { background-color: #555; }
CSS Explanation:
Code Section
What It Does
* { margin: 0; padding: 0; }
Resets browser default styles.
.navbar { background-color: #333; }
Sets navbar background.
.menu { display: flex; }
Makes the main menu horizontal.
.menu > li { position: relative; }
Necessary so submenu can position itself relative to parent.
.dropdown-menu { display: none; }
Hides the dropdown by default.
.dropdown:hover .dropdown-menu { display: block; }
When hovering .dropdown, show .dropdown-menu.
.dropdown-menu { position: absolute; top: 100%; }
Places the dropdown just below the parent item.
Part 4: Exercises
Exercise 1:
Modify the dropdown so it appears on click (Hint: Use the :focus-within pseudo-class.)
Exercise 2:
Create a multi-level dropdown (a submenu inside a submenu).
Exercise 3:
Add CSS transitions for a smooth dropdown animation.
Exercise 4:
Make the dropdown menu centered below the parent link, not left-aligned.
Part 5:
Objective:
Create a CSS-only responsive dropdown menu that:
Works on both desktop (hover) and mobile (click/focus).
Has smooth fade-in effects.
Complete Code:
HTML
html
code
<nav class="navbar"> <ul class="menu"> <li><a href="#">Home</a></li> <li class="dropdown"> <a href="#" tabindex="0">Services</a> <ul class="dropdown-menu"> <li><a href="#">Web Design</a></li> <li><a href="#">App Development</a></li> <li><a href="#">SEO</a></li> </ul> </li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
CSS
css
code
/* Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Navbar */ .navbar { background-color: #333; padding: 10px; } .menu { list-style: none; display: flex; justify-content: center; } .menu > li { position: relative; margin: 0 15px; } .menu > li > a { color: white; text-decoration: none; padding: 12px 20px; display: block; font-size: 18px; } /* Dropdown */ .dropdown-menu { opacity: 0; visibility: hidden; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #444; list-style: none; min-width: 180px; transition: 0.3s ease; border-radius: 8px; overflow: hidden; } .dropdown-menu li a { padding: 12px 16px; color: white; display: block; } /* Show Dropdown on Hover or Focus */ .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; } /* Hover Effects */ .menu li a:hover, .dropdown-menu li a:hover { background-color: #555; }
Explanation :
Feature
How It's Achieved
Visibility control
opacity and visibility are used instead of display: none, allowing smooth animation.
Center alignment
left: 50% and transform: translateX(-50%) center the dropdown below the parent.
Responsive
:hover for desktop, :focus-within for mobile (touch devices).
Smooth animation
transition: 0.3s ease; for a gradual reveal.
Accessibility
Adding tabindex="0" to parent <a> allows keyboard focus.
Part 6: Summary
How to build a dropdown menu without JavaScript.
Different techniques: hover, focus-within, CSS animations.
Exercises and a full project for practice.
Optional Challenge
Create a Mega Menu (big dropdowns with multiple columns) using only CSS!
No comments:
Post a Comment