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
  3. CSS Sidebar Menus
  4. CSS Horizontal Menus
  5. CSS Fullscreen Menus
  6. CSS Toggle Menus
  7. CSS Off-Canvas 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