35+ CSS Dropdown Menus - Free Code + Demos
Collection of 35+ CSS Dropdown Menus. All items are 100% free and open-source.
1. Molten Menu
Here's a hot new menu to try out. This combines a CSS drop down menu, and the oozing effects of liquid flame.
Author: Zealand (bowties)
Links: Source Code / Demo
Created on: December 11, 2018
Made with: HTML, CSS
Tags: cpc-fire, codepenchallenge
2. Dark HTML CSS Dropdown Menu
Simple menu with aria and ':focus-within' pseudo selector for tab sub menu.
Author: Marco Besagni (marcobesagni)
Links: Source Code / Demo
Created on: June 29, 2018
Made with: HTML, Sass
Tags: codepenchallenge, cpc-menus, focus-within, challenge, css
3. Colorful Gradient Menu
Responsive gradient menu for CodePen Challenge
Author: Halida Astatin (halidaa)
Links: Source Code / Demo
Created on: June 29, 2018
Made with: HTML, Less
Tags: codepenchallenge, cpc-menus, cssvariable, navigation, gradient
4. Main Menu Dropdown
Author: Mohamed Ayman (Mohamed-Ayman)
Links: Source Code / Demo
Created on: June 28, 2018
Made with: HTML, SCSS
5. Vertical Color-adapting CSS Menu
Simple vertical animated CSS hamburger menu with that adapts to the background color using mix-blend-mode.
Author: Ines Montani (ines)
Links: Source Code / Demo
Created on: February 20, 2016
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, css3, ui, menu
6. Simple PureCss Dropdown Menu With Following Subnav
Menu with dropdown made only in css, with a line that follow the hover on the line
Author: Robert Borghesi (dghez)
Links: Source Code / Demo
Created on: February 17, 2015
Made with: HTML, SCSS
Tags: menu, dropdown, css, animation, translate
7. Header Dropdown Menu
Author: Ahmed Nasr (ahmedhosna95)
Links: Source Code / Demo
Created on: June 27, 2018
Made with: HTML, SCSS
Tags: codepenchallenge
8. Zigzag Dropdown Menu Concept
This is just another dropdown menu concept.
Author: Catalin Rosu (catalinred)
Links: Source Code / Demo
Created on: September 2, 2013
Made with: HTML, CSS, JS
Tags: css3
9. Fancy Dropdown Menu
This is my first code pen challenge. Sub-Menu is rotated in using a transform.
Author: Jesus Rodriguez (J_Enrique)
Links: Source Code / Demo
Created on: June 25, 2018
Made with: HTML, SCSS, JS
Tags: codepenchallenge, cpc-menus, no-js, font-awesome, css
10. Recursive Hover Nav ( Only CSS )
Author: sean_codes (sean_codes)
Links: Source Code / Demo
Created on: January 10, 2018
Made with: HTML, CSS, JS
11. Cool Dropdown Menu Effects Pure Css
But pretty useless in real world :)
Author: Ruslan Pivovarov (mrspok407)
Links: Source Code / Demo
Created on: July 31, 2016
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: menu, dropdown, pure-css
12. Simple Pure CSS Dropdown Menu
Simple, sleek looking dropdown menu effect achieved using pure CSS. Simple functionality, method can be extended to create a secondary dropdown block with few edits.
Author: Connor Brassington (connorbrassington)
Links: Source Code / Demo, Dribbble.com
Created on: November 15, 2014
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: pure-css, dropdown, menu, beginner, design
13. Simple PureCss Dropdown Menu With Following Subnav
Menu with dropdown made only in css, with a line that follow the hover on the line
Author: Robert Borghesi (dghez)
Links: Source Code / Demo
Created on: February 17, 2015
Made with: HTML, SCSS
Tags: menu, dropdown, css, animation, translate
14. Simple Pure CSS Dropdown Menu
Simple, sleek looking dropdown menu effect achieved using pure CSS. Simple functionality, method can be extended to create a secondary dropdown block with few edits.
Author: Connor Brassington (connorbrassington)
Links: Source Code / Demo
Created on: November 15, 2014
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: pure-css, dropdown, menu, beginner, design
15. Dropdown Menus
Animated, CSS dropdown menus
Author: Kevin (kkrueger)
Links: Source Code / Demo
Created on: April 24, 2014
Made with: HTML, SCSS
Tags: dropdown, nav, menu, animated, pure-css
16. Zigzag Dropdown Menu Concept
This is just another dropdown menu concept.
Author: Catalin Rosu (catalinred)
Links: Source Code / Demo
Created on: September 2, 2013
Made with: HTML, CSS, JS
Tags: css3
17. Simple, CSS Only, Responsive Menu
Author: John Urbank (jurbank)
Links: Source Code / Demo
Created on: September 4, 2012
Made with: HTML, CSS
Tags: farm-animals, css, responsive, menu
18. Swanky Pure CSS Drop Down Menu V2.0
Pure CSS Drop down menu. Nice little addition to any non-javascript user interface. Uses the labels for trick to toggle animations.
Author: Jamie Coulter (jcoulterdesign)
Links: Source Code / Demo
Created on: April 19, 2015
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: css, dropdown, menu, ui, ux
19. Responsive Dropdown Menu
Responsive dropdown menu. http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly/
Author: Boyd Massie (massiebn)
Links: Source Code / Demo
Created on: April 22, 2014
Made with: HTML, CSS
Tags: responsive, navigation
20. 3d Nested Navigation
Author: Devilish Alchemist (devilishalchemist)
Links: Source Code / Demo
Created on: December 16, 2014
Made with: HTML, SCSS
21. CSS-Only Nested Dropdown Navigation
Based off of a piece of code I did for @jzl's portfolio navigation at http://jeselleobina.com/portfolio. Stay tuned for a full tutorial on Tuts+! For an ARIA-accessible version, click here http://codepen.io/gabriellewee/pen/oWyObX
Author: Gabrielle Wee 🧧 (gabriellewee)
Links: Source Code / Demo
Created on: May 11, 2017
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: dropdown, navigation, nav, checkbox, option
22. Pure CSS DropDown Menu
A simple example of a dowpdown menu made with only CSS3 and HTML
Author: Andor Nagy (andornagy)
Links: Source Code / Demo
Created on: April 28, 2013
Made with: HTML, CSS
Tags: css, dropdown, menu, navigation
23. Pure CSS Dropdown Menu
A dropdown menu created using only SCSS. To Do: Make this accessible! Check out the full article on the thoughtbot blog: https://robots.thoughtbot.com/you-don-t-need-javascript-for-that
Author: Cristina Silva (cristina-silva)
Links: Source Code / Demo
Created on: April 29, 2016
Made with: HTML, SCSS
24. Full CSS3 Dropdown Menu
A better CSS3 only Dropdown menu
Author: daniesy (daniesy)
Links: Source Code / Demo
Created on: January 25, 2014
Made with: HTML, SCSS
Tags: dropdown, css3, menu
25. Nice Dropdown Menu!
Author: Lukasz (llucaso)
Links: Source Code / Demo
Created on: June 16, 2017
Made with: HTML, CSS, JS
26. Pure CSS Responsive Navbar Menu With Dropdown
Build a Responsive Navbar Menu with Dropdown menu using Sass
Author: Syahrizal (syahrizaldev)
Links: Source Code / Demo
Created on: December 23, 2019
Made with: HTML, SCSS
Tags: responsive-menu, dropdown-menu, responsive-navbar, navbar, navbar-menu
27. Dropdown Menu
Author: Oybek (Oybek_077)
Links: Source Code / Demo
Created on: April 29, 2019
Made with: HTML, SCSS
Tags: dropdown-menu, animation
28. Super Simple CSS Dropdown Menu
Using CSS and a few nested unordered lists, you can create a really simple dropdown menu in no time at all.
Author: Anastasiia P (stasysiia)
Links: Source Code / Demo
Created on: June 7, 2020
Made with: HTML, CSS
Tags: css, html, css3, dropdown-menu
29. Vertical Dropdown Menu
A simple CSS vertical dropdown menu with clean design.
Author: Kerem Beyazıt (kerembeyazit)
Links: Source Code / Demo
Created on: November 24, 2018
Made with: HTML, CSS, JS
Tags: dropdown-menu, menu, navigation, vertical dropdown, nav
30. Dino Drop Down
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: February 19, 2013
Made with: HTML, CSS
31. Dropdown Dark/light - Pure CSS -
Author: Ivan Grozdic (ig_design)
Links: Source Code / Demo
Created on: July 7, 2020
Made with: HTML, CSS, JS
Tags: dropdown, pure-css, animation, css, checkbox
32. Context Menu With Feather Icons
Inspired by https://dribbble.com/shots/11117547-Popover-components Icons from https://feathericons.com/
Author: Håvard Brynjulfsen (havardob)
Links: Source Code / Demo
Created on: June 3, 2020
Made with: HTML, SCSS, JS
Tags: menu, button, list, dropdown
33. Dropdown Menus
Author: MGI Designer (MgiDesigner)
Links: Source Code / Demo
Made with: HTML, SCSS
More Awesome Lists:
Share: