Post thumbnail: 17 CSS Dropdown Menus

17 CSS Dropdown Menus

Collection of hand-picked free HTML and CSS dropdown menu code examples. Update of October 2018 collection. 3 new items.

Related Articles

  1. CSS Menus
  2. CSS Circle Menus
  3. CSS Mobile Menus
  4. CSS Sidebar Menus
  5. CSS Horizontal Menus
  6. CSS Fullscreen Menus
  7. CSS Sliding Menus
  8. CSS Toggle Menus
  9. CSS Off-Canvas Menus

Author

  • Zealand

Links

Made with

  • HTML / CSS

About the code

Molten Menu

This combines a CSS drop down menu, and the oozing effects of liquid flame.

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

Responsive: no

Dependencies: -

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

Author

  • Mohamed Ayman

Links

Made with

  • HTML / CSS (SCSS)

About the code

Main Menu

Horizontal menu with dropdown effects in HTML and CSS.

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

Responsive: yes

Dependencies: ionicons.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: -

Author

  • Ahmed Nasr

Links

Made with

  • HTML / CSS (SCSS)

About the code

Horizontal Dropdown Menu

Pure CSS horizontal dropdown menu with nice transitions and beautiful palette.

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

Responsive: yes

Dependencies: ionicons.css

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