35 CSS Dropdown Menu Examples

An agglomeration of the top free CSS dropdown menu code examples. These carefully curated CSS dropdown menus each contain unique code implementations, animations, effects, and color schemes that make them suitable to utilize in web development projects for both desktop and mobile applications.

css dropdown menus featured

Hover to play
Title:

Sliding dropdown menu

Author:

Vincent Durand

Created on:

June 29, 2018

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, sliding dropdown menu with gradient background is 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.

Hover to play
Title:

Stylish dropdown menu

Author:

Rian Ariona

Created on:

September 26, 2016

Made with:

HTML(Pug), SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, stylish dropdown menu similar to stripe website is 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.

Hover to play
Title:

Flat navigation

Author:

Andy Tran

Created on:

September 03, 2015

Made with:

HTML(Haml), CSS(Less), jQuery

Responsive:

No

Dependencies:

jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, flat navigation menu with yellow and white color scheme is created using HTML(Haml), CSS(Less) and jQuery. When you hover on the 2nd menu item, it will show you menu links with smooth sliding effects.

Hover to play
Title:

Tooltip dropdown menu

Author:

Virlyz ID

Created on:

May 12, 2014

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

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

Hover to play
Title:

Cool tree menu

Author:

Karl Ward

Created on:

July 23, 2015

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Sass, jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, dropdown menu with many themes is 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.

Hover to play
Title:

Solution for long dropdown menus

Author:

Larry Geams Parangan

Created on:

March 13, 2015

Made with:

HTML, CSS, jQuery

Responsive:

No

Dependencies:

jQuery

Compatable 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.

Hover to play
Title:

Simple dropdown menu

Author:

Mike Rojas

Created on:

November 04, 2014

Made with:

HTML(Pug), SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple and clean looking dropdown menu is 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.

Hover to play
Title:

Simple pure css dropdown menu

Author:

Connor Brassington

Created on:

June 04, 2016

Made with:

HTML(Pug), SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful, simple sleek looking drop down menu with the pink background is created using HTML(Pug), SCSS. When you hover over the menu item, it will show you the sub menus in the dropdown.

Hover to play
Title:

Elegant dropdown menu

Author:

Sathish Kumar

Created on:

April 10, 2020

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant and attractive dropdown menu layout created using pure HTML and SCSS. When you hover over the menu, the list items slides from the right giving a dashing look to the web page.

Hover to play
Title:

Cool dropdown menu effects

Author:

Ruslan Pivovarov

Created on:

August 23, 2016

Made with:

HTML(Pug), SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An attractive, cool dropdown menu is created using HTML(Pug) and SCSS. When you hover over the menu item, it will unfold the items with a beautiful animation.

Hover to play
Title:

CSS dropdown menu

Author:

Rlski

Created on:

July 16, 2018

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple and clean dropdown menu is created using pure HTML and CSS. When you click on the menu, it will show a beautiful dropdown with a smooth sliding effect.

Hover to play
Title:

CSS only dropdown menu

Author:

Steven

Created on:

January 08, 2019

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An attractive, dropdown menu in orange shade with a shadow gives 3D effect to the button. It is created using pure HTML and CSS. When you click on the dropdown, it expands to display sub menus with a beautiful animating effects.

Hover to play
Title:

Dropdown menu

Author:

Scott Marshall

Created on:

May 03, 2020

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Sass, jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic black and white, 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.

Hover to play
Title:

Dropdown gradient menu

Author:

Halida Astatin

Created on:

July 03, 2018

Made with:

HTML, CSS(Less)

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

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

Hover to play
Title:

Fun hex navigation

Author:

Antoinette Janus

Created on:

July 20, 2016

Made with:

HTML, SCSS, JavaScript

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, attractive hex navigation menu is created using HTML, SCSS, and JavaScript. When you click on the menu, it will fill the background with quick animation and also show the menu to the right side in the block with nice line drawing effects.

Hover to play
Title:

Animated dropdown menu

Author:

Adam Kuhn

Created on:

June 27, 2018

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatable 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.

Hover to play
Title:

Classic dropdown menu

Author:

Ahmad Nasr

Created on:

June 30, 2018

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatable 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.

Hover to play
Title:

Molten Menu

Author:

Zealand

Created on:

January 24, 2019

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, molten dropdown menu with infinite animation effects of liquid flame is created using pure HTML and CSS. When you hover over the menu items, an amazing animated menu items appears giving a very attractive look. It will look shiny with a dark color scheme website.

Hover to play
Title:

Multicolor dropdown menu

Author:

Mohamed Ayman

Created on:

June 28, 2018

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful and multi color dropdown menu is 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.

Hover to play
Title:

Swanky dropdown menu

Author:

Jamie Coulter

Created on:

April 12, 2016

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A modern, swanky drop-down menu is 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.

Hover to play
Title:

Zigzag dropdown menu

Author:

Catalin Rosu

Created on:

November 12, 2019

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An attractive, zigzag dropdown menu layout is 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.

Hover to play
Title:

Collapsable Menu

Author:

Chris Ota

Created on:

July 13, 2015

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Sass, jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, collapsible dropdown menu layout is 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.

Hover to play
Title:

Recursive hover nav

Author:

Sean_codes

Created on:

September 18, 2018

Made with:

HTML, CSS, Javascript

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A creative, recursive hover dropdown menu layout is 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.

Hover to play
Title:

Dropdown dark light

Author:

Ivan Grozdic

Created on:

July 07, 2020

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, dropdown with dark and light theme is created using HTML and CSS. When you click on the dropdown, it shows an amazing drop down items. When you hover over them, they are highlighted with a dark or light bar. A button in the right corner is provided that will toggle between dark and light theme.

Hover to play
Title:

Nested dropdown navigation

Author:

Gabrielle Wee

Created on:

May 15, 2017

Made with:

HTML(Haml), SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A sophisticated, nested dropdown navigation menu is 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.

Hover to play
Title:

CSS Staggered animation dropdown menu

Author:

Boomer

Created on:

September 13, 2016

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Sass, jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful CSS staggered animation dropdown menu is 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.

Hover to play
Title:

Responsive bootstrap 4 menu

Author:

Ivan Grozdic

Created on:

July 08, 2020

Made with:

HTML, CSS, Bootstrap

Responsive:

Yes

Dependencies:

Bootstrap 4

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant and attractive dropdown menu layout is created using HTML, CSS and Bootstrap 4. When you hover over the menu, it will change the text color to purple in the light theme. You can also toggle between light and dark theme.

Hover to play
Title:

Shopping cart dropdown

Author:

Andre Madarang

Created on:

September 03, 2015

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Sass, jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic, shopping cart dropdown menu is 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.

Hover to play
Title:

Fancy dropdown menu

Author:

Jesus Rodriguez

Created on:

July 10, 2018

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatable 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.

Hover to play
Title:

Pure CSS dropdown menu

Author:

Robert Borghesi

Created on:

February 19, 2015

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful, simple dropdown layout in green is 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.

Hover to play
Title:

Gooey Dropdown menu

Author:

Mark Eriksson

Created on:

June 29, 2020

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, attractive dropdown menu is created using HTML and SCSS. When you click on the dropdown, it will display different emojis icon.

Hover to play
Title:

Wavy dropdown menu

Author:

Kevin

Created on:

April 29, 2014

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatable 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.

Hover to play
Title:

Custom dropdown menu

Author:

Veronica

Created on:

March 18, 2018

Made with:

HTML, CSS, jQuery

Responsive:

Yes

Dependencies:

jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An classic, elegant dropdown menu in blue color is created using HTML, CSS and jQuery. When you click on the menu, it displays a beautiful dropdown with the items listed in white. When you hover over the item, it will highlight with the blue vertical line on the left to show the selection.

Hover to play
Title:

Smooth dropdown menu

Author:

Mark

Created on:

December 19, 2019

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple and clean looking dropdown menu is created using pure HTML and SCSS. When you hover over the item, it will change the text color to light blue and displays the dropdown if exists.

Hover to play
Title:

The more menu

Author:

Mikael Ainalem

Created on:

October 08, 2019

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful more menu with the three dots is created using HTML and CSS. When you click on the menu, it will display a cut out shaped block with unfolding effect containing the dropdown items.