Dark code
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOW TO W3.CSS JAVA JQUERY
Tutorials
Bottom Navigation
References Exercises Videos Pro Get Certified Free Website Log in
Responsive Bottom Nav
Bottom Border Nav Links
Right Aligned Menu Links
Centered Menu Link
Equal Width Menu Links
Fixed Menu NEW
Slide Down Bar on Scroll
How TO - Dropdown Navbar
We just launched
Hide Navbar on Scroll
W3Schools videos
Shrink Navbar on Scroll
Sticky Navbar
Navbar on Image ❮ Previous Next ❯
Hover Dropdowns
Click Dropdowns
Cascading Dropdown Learn how to create a dropdown navigation bar.
Explore now
Dropdown in Topnav
Dropdown in Sidenav
Resp Navbar Dropdown Dropdown Menu in Navbar
Subnavigation Menu COLOR PICKER
Dropup
Mega Menu Home News Dropdown
Mobile Menu
Curtain Menu Dropdown Menu inside a Navigation Bar
Collapsed Sidebar
Hover over the "Dropdown" link to see the dropdown menu.
Get certified
by completing
Try it Yourself » a course today!
school
w3 s
Create A Dropdown Navbar
2
CE
02
TI 2
R
FI .
ED
Create a dropdown menu that appears when the user moves the mouse over an element inside a navigation
bar.
Get started
Step 1) Add HTML:
Example CODE GAME
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div> Play Game
</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>) to create the dropdown menu and add the dropdown links inside it.
Wrap a <div> element around the button and the <div> 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-family: 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;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
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 class is the container for .dropdown-content . Since this is a <div> element, and not an <a>
element, we have to float it to make sure that it stays next to the links.
The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed
on hover (see below). Note the min-width is set to 160px. Feel free to change this.
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.
Clickable Dropdown in Navbar
Example
Home News Dropdown
Dropdown Menu inside a Navigation Bar
Click on the "Dropdown" link to see the dropdown menu.
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.
