A collection of pure HTML & CSS navigation menu components — dropdown menus and full mega menus — built as a series of practice exercises, each one adding a new interaction pattern.
| # | Demo | Description |
|---|---|---|
| 01 | Dropdown menu v1 | Basic dropdown shown/hidden with display: block/none on hover. |
| 02 | Dropdown menu v2 | Dropdown with a smooth opacity / visibility transition. |
| 03 | Dropdown menu v3 | Dropdown that expands with an animated height transition. |
| 04 | Dropdown with flyout | Two-level dropdown with a nested right-side flyout submenu. |
| 05 | Mega menu v1 | Full-width mega menu using an opacity / visibility transition. |
| 06 | Mega menu v2 | Full-width mega menu that expands with a height transition. |
| 07 | Final menu v1 | Mega menu that slides in from the side by animating left. |
| 08 | Final menu v2 | Alternate timing/easing of the sliding mega menu. |
| 09 | Mixing dropdown menu with mega menu | Right-aligned navbar combining a dropdown submenu and a mega menu in one nav. |
- Pure HTML & CSS — no JavaScript, no frameworks, no build step
- Uses native CSS nesting (
&:hover { ... }inside selectors) - Different show/hide techniques compared side by side:
display,opacity/visibility,height, andleftposition transitions - Responsive layout with Flexbox
- HTML5
- CSS3 (Flexbox, CSS nesting, transitions)
No build tools or dependencies are required.
- Clone the repository:
git clone https://github.com/mohammadtakali/css-dropdown-menus.git cd css-dropdown-menus - Open
index.htmlin your browser, or serve the folder with any static server, e.g.:npx serve .
This project uses native CSS nesting syntax (& inside a selector block). It works in current versions of Chrome, Edge, Safari, and Firefox. If you need to support older browsers, the nested rules should be flattened into standard CSS selectors.
This project is licensed under the MIT License — see the LICENSE file for details.