Post thumbnail: 14 CSS Dropdown Menus

14 CSS Dropdown Menus

Collection of hand-picked free HTML and CSS dropdown menu code examples.

Related Articles

  1. CSS Menus
  2. CSS Mobile Menus

Demo image: HTML & CSS Dropdown Menu HTML & CSS Dropdown Menu - GIF Demo

Author

  • Marco Besagni

Links

Made with

  • HTML / CSS (Sass)

About the code

HTML & CSS Dropdown Menu

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Gradient Menu Gradient Menu - GIF Demo

Author

  • Halida Astatin

Links

Made with

  • HTML / CSS (Less)

About the code

Gradient Menu

Responsive gradient dropdown menu.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: CSS Menu CSS Menu - GIF Demo

Author

  • Jenning

Links

Made with

  • HTML / CSS (Sass)

About the code

CSS Menu

No JS - be sure to check out the mobile menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Dropdown Menu CSS Dropdown Menu - GIF Demo

Author

  • Vincent Durand

Links

Made with

  • HTML / CSS (SCSS)

About the code

CSS Dropdown Menu

HTML and CSS dropdown menu with nice effect.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Dropdown Menu Dropdown Menu - GIF Demo

Author

  • Adam Kuhn

Links

Made with

  • HTML / CSS (SCSS)

About the code

Dropdown Menu

Cool HTML & CSS dropdown menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Recursive Hover Navigation Recursive Hover Navigation - GIF Demo

Author

  • sean_codes

Links

Made with

  • HTML / CSS

About the code

Recursive Hover Navigation

Only CSS recursive hover nav.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Cool Dropdown Menu Effects Cool Dropdown Menu Effects - GIF Demo

Author

  • Ruslan Pivovarov

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Cool Dropdown Menu Effects

Cool dropdown menu pure CSS effects.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Dropdown Menu Dropdown Menu - GIF Demo

Author

  • Sathish kumar

Links

Made with

  • HTML / CSS (SCSS)

About the code

Dropdown Menu

Pure CSS dropdown menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Simple Pure CSS Dropdown Menu Simple Pure CSS Dropdown Menu - GIF Demo

Author

  • Robert Borghesi

Links

Made with

  • HTML / CSS (SCSS)

About the code

Simple Pure CSS Dropdown Menu

Menu with dropdown made only in CSS, with a line that follow the hover on the line.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Simple Pure CSS Dropdown Menu Simple Pure CSS Dropdown Menu - GIF Demo

Author

  • Connor Brassington

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Dropdown Menus Dropdown Menus - GIF Demo

Author

  • Kevin

Links

Made with

  • HTML / CSS (SCSS)

About the code

Dropdown Menus

Animated CSS dropdown menus.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Zigzag Dropdown Menu Zigzag Dropdown Menu - GIF Demo

Author

  • Catalin Rosu

Links

Made with

  • HTML / CSS

About the code

Zigzag Dropdown Menu

This is just another dropdown menu concept.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Responsive Menu Responsive Menu - GIF Demo

Author

  • John Urbank

Links

Made with

  • HTML / CSS

About the code

Responsive Menu

Simple, CSS only, responsive dropdown menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

back to top