40 CSS Dropdown Menu Examples

An agglomeration of the top free HTML and CSS dropdown menu code examples. Each of these CSS dropdown menus has been carefully curated from Codepen and other resources to present effective solutions for enhancing the data organization as well as the UI and UX of an app or website.

stylish gradient css dropdown menu

Title:

Sliding dropdown menu

Author:

Vincent Durand

Created on:

June 29, 2018

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful sliding CSS dropdown menu with gradient background created using pure HTML and SCSS. It has amazing fade-in effects for each menu link for the item. When you hover on the menu item, it will highlight the background with sliding effects.

Title:

Recursive hover nav

Author:

Sean_codes

Created on:

September 18, 2018

Made with:

HTML, CSS, Javascript

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A creative recursive hover dropdown menu layout created using HTML, CSS, and JavaScript. When you hover over the menu, it will show the submenu in a blocks with a nice sliding and fade-in effect.

Title:

Dropdown dark/light - pure css - #14

Author:

Ivan Grozdic

Created on:

July 07, 2020

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

Beautiful dropdown created in the shape of a button with a neon color scheme. Triggers a dropdown animation with the button arrow rotating respectively.

Title:

Dropdown gradient menu

Author:

Halida Astatin

Created on:

July 03, 2018

Made with:

HTML, CSS(Less)

Responsive:

Yes

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A decorous and amazing dropdown menu with gradient background created using pure HTML and CSS. It has amazing smooth hovering animation. It will scale the menu item bigger with the gradient background color.

Title:

Swanky dropdown menu

Author:

Jamie Coulter

Created on:

April 12, 2016

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A modern swanky drop-down menu created using pure HTML and SCSS. When you hover on menu items, it will highlight them with smooth animation. When you click on the menu, it will expand the submenu with a nice sliding effect.

Title:

Dropdown menu

Author:

Scott Marshall

Created on:

May 03, 2020

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Sass, jQuery

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic black and white CSS dropdown menu with smooth sliding effect is created using HTML, SCSS, and jQuery. When you hover on the menu items, it will change the background color with a nice sliding effect and also show a menu with a sliding animation.

Title:

Dropdown Menu

Author:

Flavio Amaral

Created on:

June 14, 2021

Made with:

HTML, CSS, JavaScript

Responsive:

yes

Dependencies:

JavaScript

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful dropdown menu, created with CSS, HTML, and JavaScript. Provides very smooth hover effect throughout all the list items and the cursor can be customized to icons matching the list items.

Title:

CSS Staggered animation dropdown menu

Author:

Boomer

Created on:

September 13, 2016

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Sass, jQuery

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful CSS staggered animation dropdown menu created using HTML, Sass, and jQuery. When you hover on the menu item, it will show you links with a nice transparent column and menu items sliding from the left.

Title:

Morphing tab button with list

Author:

Colin Horn

Created on:

August 03, 2017

Made with:

HTML, SCSS, JavaScript

Responsive:

yes

Dependencies:

JavaScript

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful CSS dropdown menu design in the form of a button, that morphs into a dropdown menu with all the items. Created with HTML, SCSS and JavaScript

Title:

Shopping cart dropdown

Author:

Andre Madarang

Created on:

September 03, 2015

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Sass, jQuery

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic shopping cart dropdown menu created using HTML, SCSS, and jQuery. When you click on the cart icon, it will show you the button for checkout with a smooth fade-in effect.

Title:

Fancy dropdown menu

Author:

Jesus Rodriguez

Created on:

July 10, 2018

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A decorous amazing transparent and fancy menu created using pure HTML and SCSS. Menu icons are beautifully arranged with a gradient background. It has an amazing smooth hover effects that shows the menu item with a nice sliding effect.

Title:

Gooey Dropdown Menu

Author:

Mark Eriksson

Created on:

June 29, 2020

Made with:

HTML, SCSS

Responsive:

no

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful and creative button style, dropdown menu, created with HTML and CSS. The button morphs and duplicates to provide icons as menu items.

Title:

Pure CSS dropdown menu

Author:

Robert Borghesi

Created on:

February 19, 2015

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful simple dropdown layout in green created using pure HTML and SCSS. When you hover over the menu, it will highlight the menu item with a nice line effect. When you hover on the 3rd item it will show menu links with nice sliding effects.

Title:

Classic dropdown menu

Author:

Ahmad Nasr

Created on:

June 30, 2018

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic modern and clean dropdown menu created using pure HTML and CSS. Its light blue and white color scheme looks elegant. It has amazing animation effects when you hover on menu items.

Title:

Wavy dropdown menu

Author:

Kevin

Created on:

April 29, 2014

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant and attractive dropdown menu layout created using pure HTML and SCSS. It has given different colors for all the menu items along with the wavy effect. When you hover on the menu item it will show amazing sliding effects with menu links.

Title:

Hamburger style dropdown menu

Author:

Seanghay

Created on:

October 18, 2017

Made with:

HTML(Pug), CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A Simple hamburger dropdown menu created using HTML(Pug) and CSS. It has smooth fade-in and fade-out effects when you click on the menu item. When you hover on the menu items, it will highlight the menu item with a vertical purple line on the left to show the selection.

Title:

Multicolor dropdown menu

Author:

Mohamed Ayman

Created on:

June 28, 2018

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful and multi color dropdown menu created using pure HTML and SCSS. Amazing smooth animation effects are given when you will hover over the item on the menu. It also has a nice fade-in animation effect.

Title:

Zigzag dropdown menu

Author:

Catalin Rosu

Created on:

November 12, 2019

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An attractive zigzag dropdown menu layout created using pure HTML and CSS. When you hover over the menu, it will change the menu item background with a smooth animation. In the 2nd menu item, it will show you the dropdown zigzag menu.

Title:

Collapsable Menu

Author:

Chris Ota

Created on:

July 13, 2015

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Sass, jQuery

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant collapsible dropdown menu layout created using HTML, SCSS, and jQuery. When you hover on the menu items, it will change the text color to green and also show the sub-menu on the first item.

Title:

Vertical dropdown menu

Author:

Kerem Beyazit

Created on:

November 24, 2018

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic vertical dropdown menu created using pure HTML and CSS. It will show fade-in effects for the menu links when you hover on the menu item. It looks stylish with a blue and light color scheme.

Title:

Stylish dropdown menu

Author:

Rian Ariona

Created on:

September 26, 2016

Made with:

HTML(Pug), SCSS

Responsive:

No

Dependencies:

Sass

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful stylish dropdown menu similar to stripe website created using HTML(Pug) and SCSS. When you hover over the menu, it will show a menu card with a quick fade-in effect you can change the transition duration to make it smooth.

Title:

Nested dropdown navigation

Author:

Gabrielle Wee

Created on:

May 15, 2017

Made with:

HTML(Haml), SCSS

Responsive:

No

Dependencies:

Sass

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A sophisticated nested dropdown navigation menu created using HTML(Haml) and SCSS. When you click on the menu item, it will show you the nested menu with nice sliding effects and fade-in effects. When you hover over the menu, it will lighten its text and border color to look it different from the other menu items.

Title:

Solution for long dropdown menus

Author:

Larry Geams Parangan

Created on:

March 13, 2015

Made with:

HTML, CSS, jQuery

Responsive:

No

Dependencies:

jQuery

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An amazing dropdown menu created using HTML, CSS, and jQuery. No need to be longer because it has an auto scroll effect when you drag your mouse in the menu links. It is a great solution if you have a long dropdown list.

Title:

Simple dropdown menu

Author:

Mike Rojas

Created on:

November 04, 2014

Made with:

HTML(Pug), SCSS

Responsive:

No

Dependencies:

Sass

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple and clean looking dropdown menu created using pure HTML(Pug) and SCSS. When you hover over the menu, it will change the background color to purple and show the menu items.

Title:

CSS styled and filterable select dropdown

Author:

Mari Johannesen

Created on:

October 11, 2016

Made with:

HTML, CSS, JavaScript

Responsive:

yes

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

Minimal yet pretty CSS dropdown menu made with HTML and JavaScript. Provides a color changing hover effect and a search bar to filter out results

Title:

Dynamic Bezier Dropdown

Author:

Bennett Waisbren

Created on:

April 28, 2016

Made with:

HTML, CSS, JavaScript

Responsive:

yes

Dependencies:

JavaScript

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

Very beautiful and functional dropdown menu design in the form of a button that changes into a gradient color upon hover. Drops down the menu items upon click which have the same gradient color effect with a slide-in animation.

Title:

Custom Dropdown list

Author:

Chih-his-chen

Created on:

April 01, 2020

Made with:

HTML, CSS, JavaScript

Responsive:

yes

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

Beautifully designed CSS dropdown menu created with HTML and JavaScript. Drops down the menu upon click. Let's you select a value from the menu and submit it with a button.

Title:

Stripe.com Style Dropdown Menu 2

Author:

Rodrigo

Created on:

October 21, 2016

Made with:

HTML, CSS, JQuery

Responsive:

yes

Dependencies:

JQuery

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

Minimal yet very beautiful dropdown menu design. Provides a very smooth dropdown and transition animation. Contains three types of list layouts.

Title:

Animated dropdown menu

Author:

Adam Kuhn

Created on:

June 27, 2018

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An amazing dropdown menu with pop up effects are created using pure HTML and SCSS. It has smooth hover effects with sliding the background. The menu will be shown on hover with beautiful animation effects.

Title:

Drop Down Menu

Author:

Mark

Created on:

December 09, 2019

Made with:

HTML, SCSS

Responsive:

yes

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

NavBar style with a dropdown functionality, created minimally with HTML and SCSS. Very responsive and easy to use.

Title:

Responsive dropdown menu

Author:

Dogukan Batal

Created on:

November 03, 2017

Made with:

HTML, CSS(Less), jQuery

Responsive:

Yes

Dependencies:

jQuery

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant responsive dropdown menu layout created using HTML, CSS(Less), and jQuery. When you hover on the menu items, it will highlight the menu with the underline and menu items will pop out from the bottom with a beautiful animation.

Title:

Tooltip dropdown menu

Author:

Virlyz ID

Created on:

May 12, 2014

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful and colorful dropdown menu with icons created using pure HTML and CSS. When you hover over the menu, it will show you the menu links with smooth sliding effects.

Title:

Pure Css dropdown menu

Author:

Sathish kumar

Created on:

February 19, 2015

Made with:

HTML, SCSS

Responsive:

yes

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

Another NavBar style with very minimal design and amazingly smooth dropdown animation. Created with HTML and SCSS.

Title:

CSS Dropdown Menu

Author:

Riski

Created on:

March 12, 2015

Made with:

HTML, CSS

Responsive:

no

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

Minimal yet beautifully designed CSS dropdown menu. Triggers a minimal and smooth dropdown animation with menu items upon click.

Title:

Cool Dropdown Menu Effects Pure Css

Author:

Ruslan Pivovarov

Created on:

July 31, 2016

Made with:

HTML, SCSS

Responsive:

no

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

Navbar dropdown design created with HTML and SCSS. Triggers a smooth stack or 3D item dropdown effect on over.

Title:

Simple Pure CSS Dropdown Menu

Author:

Connor Brassington

Created on:

November 16, 2014

Made with:

HTML(Pug), SCSS

Responsive:

no

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautifully designed navbar dropdown menu created using HTML(Pug) and SCSS. Provides a dropdown menu with items, listed with badges.

Title:

CSS3 only dropdown menu

Author:

Carolina Hansson

Created on:

April 17, 2016

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant dropdown menu with smooth transitions created using pure HTML and SCSS. When you hover on the menu item, it will change text color and also show underline with smooth animation. It opens a dropdown list with sliding effects.

Title:

Cool tree menu

Author:

Karl Ward

Created on:

July 23, 2015

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Sass, jQuery

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful dropdown menu with many themes created using HTML, SCSS and jQuery. A cool tree menu built from a simple unordered list. It has a smooth sliding effect for the menu links when you click on the menu items. You can see all the menu themes by selecting from top nav buttons.

Title:

Responsive navigation menu

Author:

Jenning

Created on:

November 27, 2018

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A sophisticated clean and modern-looking navigation menu created using HTML and Sass. When you hover over the menu, it will show the little dot under the menu item and also show the menu links with smooth fade-in and sliding effects.

Title:

3D nested navigation

Author:

Devilish Alchemist

Created on:

June 01, 2015

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple nested navigation menu layout created using pure HTML and SCSS. It looks plain and simple. It has given smooth hovering and sliding effects on the menu item. It will change the background color when you hover.