Dark code
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOW TO W3.CSS JAVA JQUERY
Tutorials
Equal Width Menu Links
References Exercises Videos Pro Get Certified Free Website Log in
Fixed Menu
Slide Down Bar on Scroll
Hide Navbar on Scroll
Shrink Navbar on Scroll
Sticky Navbar
Navbar on Image NEW
Hover Dropdowns
How TO - Mega Menu
Click Dropdowns We just launched
W3Schools videos
Cascading Dropdown
Dropdown in Topnav
Dropdown in Sidenav ❮ Previous Next ❯
Resp Navbar Dropdown
Subnavigation Menu
Dropup Learn how to create a mega menu (full-width dropdown menu in a navigation bar).
Mega Menu Explore now
Mobile Menu
Curtain Menu Mega Menu
Collapsed Sidebar COLOR PICKER
Collapsed Sidepanel
Home News Dropdown
Pagination
Breadcrumbs
Button Group
Responsive Mega Menu (Full-width dropdown in navbar)
Vertical Button Group
Hover over the "Dropdown" link to see the mega menu.
Resize the browser window to see the responsive effect.
Get certified
by completing
a course today!
school
w3 s
2
CE
02
TI 2
R
FI .
ED
Try it Yourself » Get started
Create A Mega Menu CODE GAME
Create a dropdown menu that appears when the user moves the mouse over an element inside a navigation
bar.
Step 1) Add HTML:
Example
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a> Play Game
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>
Example Explained
Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element.
Use a container element (like <div class="dropdown-content">) to create the dropdown menu and add a grid
(columns) and add dropdown links inside the grid.
Wrap a <div class="dropdown"> element around the button and the container element (<div
class="dropdown-content"> to position the dropdown menu correctly with CSS.
Step 2) Add CSS:
Example
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Mega Menu header, if needed */
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
/* Style links inside the columns */
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background color on hover */
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
Try it Yourself »
Example Explained
We have styled the navigation bar and the navbar links with a background-color, padding, etc.
We have styled the dropdown button with a background-color, padding, etc.
The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed
on hover (see below). It is positioned to be visible right below the dropdown button, and the width is set to
100% to cover the whole screen.
Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a
"card". We also use z-index to place the dropdown in front of other elements.
The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown
button.
The .column classes are used to create three columns that floats next to each other inside the dropdown
menu (to show different categories).
Responsive Mega Menu
Example
Home News Dropdown
Responsive Mega Menu (Full-width dropdown menu in navbar)
Hover over the "Dropdown" link to see the mega menu.
/* Responsive layout - makes the three columns stack on top of each other instead of next to each
other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
Try it Yourself »
Tip: Go to our CSS Dropdowns Tutorial to learn more about dropdowns.
Tip: Go to our Clickable Dropdowns to learn more about clickable dropdowns
Tip: Go to our CSS Navbar Tutorial to learn more about navbars.
Tip: Go to our Responsive Top Navigation to learn about how to create a responsive navbar.
❮ Previous Next ❯
Report Error Spaces Pro Buy Certificate
Top Tutorials Top References Top Examples Get Certified
HTML Tutorial HTML Reference HTML Examples HTML Certificate
CSS Tutorial CSS Reference CSS Examples CSS Certificate
JavaScript Tutorial JavaScript Reference JavaScript Examples JavaScript Certificate
How To Tutorial SQL Reference How To Examples Front End Certificate
SQL Tutorial Python Reference SQL Examples SQL Certificate
Python Tutorial W3.CSS Reference Python Examples Python Certificate
W3.CSS Tutorial Bootstrap Reference W3.CSS Examples PHP Certificate
Bootstrap Tutorial PHP Reference Bootstrap Examples jQuery Certificate
PHP Tutorial HTML Colors PHP Examples Java Certificate
Java Tutorial Java Reference Java Examples C++ Certificate
C++ Tutorial Angular Reference XML Examples C# Certificate
jQuery Tutorial jQuery Reference jQuery Examples XML Certificate
FORUM | ABOUT
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly
reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie
and privacy policy.
Copyright 1999-2022 by Refsnes Data. All Rights Reserved.
W3Schools is Powered by W3.CSS.
