Post thumbnail: 19 CSS Dropdown Menu

19 CSS Dropdown Menu

Collection of HTML and CSS dropdown menu with little JavaScript.

Demo image: Dropdown Menu

Author

  • Veronica

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Dropdown Menu

Custom dropdown menu.

Demo image: Dropdown Menu

Author

  • Lukasz

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Dropdown Menu

Nice dropdown menu.

Demo image: Dropdown Menu

Author

  • naymapl

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Dropdown Menu

Dropdown menu with jQuery.

Demo image: Style Dropdown Menu

Author

  • Rian Ariona

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript/Babel

About the code

Style Dropdown Menu

Recently stripe.com Redesign it site, and the primary menu interaction really grab my attention. So here is the simple version of it.

Demo image: CSS Staggered Animation Dropdown Menu

Author

  • Boomer

Made with

  • HTML
  • CSS/Sass
  • JavaScript (jquery.js)

About the code

CSS Staggered Animation Dropdown Menu

This is a simple example of applying an animation delay to each child of a basic horizontal dropdown navigation menu.

Demo image: Dropdown Menu Effects

Author

  • Ruslan Pivovarov

Made with

  • HTML/Pug
  • CSS/SCSS

About the code

Dropdown Menu Effects

Cool dropdown menu effects pure CSS, but pretty useless in real world.

Demo image: Dropdown Menu Animation

Author

  • Dany Santos

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Dropdown Menu Animation

Nice dropdown menu with animation.

Demo image: Dropdown Menu

Author

  • Kyle Lavery

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Dropdown Menu

Dropdown menu with little jQuery.

Demo image: Dropdown

Author

  • Ariana Lynn

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Dropdown

Pretty dropdown menu.

Demo image: CSS Dropdown Menu

Author

  • Rlski

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

Author

  • Sathish kumar

Made with

  • HTML
  • CSS/SCSS

About the code

Dropdown Menu

Pure CSS dropdown menu.

Demo image: A Simple Dropdown Menu

Author

  • Mike Rojas

Made with

  • HTML/Pug
  • CSS/SCSS

About the code

A Simple Dropdown Menu

Just a simple HTML and CSS dropdown menu.

Demo image: Flat Horizontal Navigation

Author

  • Andy Tran

Made with

  • HTML/Haml
  • CSS/Less
  • JavaScript (jquery.js)

About the code

Flat Horizontal Navigation

A flat horizontal navigation that uses jQuery for a clean dropdown menu alongside with animate.css for the nice flip at the beginning.

Demo image: Dropdown Menu

Author

  • Kevin

Made with

  • HTML
  • CSS/SCSS

About the code

Dropdown Menu

Animated CSS dropdown menu.

Demo image: Dropdown Menu

Author

  • Eric Sadowski

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Dropdown Menu

The hover menu is pure CSS. The toggle menu utilizes a minimal amount of JavaScript, but will degrade gracefully because it only uses JavaScript to close the menu when the user clicks outside of the menu.

Demo image: Dropdown Menu UI

Author

  • Jeplaa

Made with

  • HTML
  • CSS

About the code

Dropdown Menu UI

Pure CSS dropdown menu.

Demo image: Zigzag Dropdown Menu Concept

Author

  • Catalin Rosu

Made with

  • HTML
  • CSS

About the code

Zigzag Dropdown Menu Concept

This is just another dropdown menu concept.

Demo image: Simple, CSS Only, Responsive Menu

Author

  • John Urbank

Made with

  • HTML
  • CSS

About the code

Simple, CSS Only, Responsive Menu

Simple dropdown menu.

Demo image: Dropdown Menu

Author

  • Lauren

Made with

  • HTML
  • CSS/LESS
  • JavaScript (jquery.js)

About the code

Dropdown Menu

This is a simple dropdown menu made using unsorted lists and CSS3 transitions.

Back to top