Collection of hand-picked free HTML and CSS dropdown menu code examples. Update of October 2018 collection. 3 new items.
Related Articles
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: -


Links
Made with
- HTML / CSS (Sass)
About the code
HTML & CSS Dropdown Menu
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -


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


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


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


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


Links
Made with
- HTML / CSS (SCSS)
About the code
Fancy Menu
Fancy dropdown menu in HTML and CSS. Inspired by https://dribbble.com/shots/1075480-Ui-Kit-Hotel
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css


Links
Made with
- HTML / CSS
About the code
Recursive Hover Navigation
Only CSS recursive hover nav.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


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


Links
Made with
- HTML / CSS (SCSS)
About the code
Dropdown Menu
Pure CSS dropdown menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


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


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


Links
Made with
- HTML / CSS (SCSS)
About the code
Dropdown Menus
Animated CSS dropdown menus.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


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


Links
Made with
- HTML / CSS
About the code
Responsive Menu
Simple, CSS only, responsive dropdown menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -