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. Bootstrap Dropdowns

Author

  • Zealand

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Made with

  • HTML / CSS

About the code

Responsive Menu

Simple, CSS only, responsive dropdown menu.

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

Dependencies: -