Collection of hand-picked free HTML and CSS dropdown menu code examples from codepen and other resources. Update of July 2019 collection. 9 new items.

Related Articles

  1. CSS Menus
  2. Bootstrap Dropdowns

Author

  • Ivan Grozdic

Links

Made with

  • HTML / CSS

About a code

Dropdown Dark/Light

Pure CSS dropdown dark/light.

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

Responsive: yes

Dependencies: unicons.css

Author

  • Mark Eriksson

Links

Made with

  • HTML / CSS (SCSS)

About a code

Gooey Dropdown Menu

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mark

Links

Made with

  • HTML / CSS (SCSS)

About a code

Drop Down Menu

Smooth drop down menu.

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

Responsive: no

Dependencies: -

Author

  • Cassidy Williams

Links

Made with

  • HTML / CSS (SCSS)

About a code

Navigation with Sub-Navigation

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

Responsive: no

Dependencies: -

Author

  • Garet McKinley

Links

Made with

  • HTML / CSS

About a code

Pure CSS Dropdown Menu

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

Responsive: no

Dependencies: -

Author

  • Mikael Ainalem

Links

Made with

  • HTML / CSS

About a code

The More Menu

Using clip-path times two to make an irregular shaped object fill out a cut-out shape in an unfold open menu effect.

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

Responsive: no

Dependencies: -

Author

  • steven

Links

Made with

  • HTML / CSS

About the code

Drop Down Menu

CSS only drop down menu.

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

Responsive: yes

Dependencies: -

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: CSS Dropdown Menu

Author

  • Rlski

Links

Made with

  • HTML
  • CSS

About the code

CSS Dropdown Menu

Full CSS dropdown navigation. Drops down on click by the use of a hidden checkbox.

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: A Simple Dropdown Menu

Author

  • Mike Rojas

Links

Made with

  • HTML/Pug
  • CSS/SCSS

About the code

A Simple Dropdown Menu

Just a simple HTML and CSS dropdown menu.

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: -