Definition:
CSS Navigation dropdown menu enhances your website and makes it professional looks by organizing the sub-categories items under the main categories.
See an example below of CSS Navigation Dropdown Menu source code and output.
Source Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body{
height: 400px;
}
.navigation_menu_item {
overflow: hidden;
/*dark blue background color*/
background-color: #00008b;
}
.navigation_menu_item a {
float: left;
padding: 10px 20px;
font-size: 20px;
color: white; /*font color white*/
text-decoration: none;
text-align: center;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbutton {
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 10px 20px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navigation_menu_item a:hover, .dropdown:hover .dropbutton {
background-color: #e0ffff;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e6e6fa;
min-width: 30%;
z-index: 1;
}
.dropdown-content a {
display: block;
float: none;
color: black;
padding: 10px 20px;
font-size: 18px;
text-decoration: none;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover {
background-color: #87cefa;
}
</style>
</head>
<body>
<div class="navigation_menu_item">
<a href="#home">Home</a>
<a href="#about_us">About Us</a>
<div class="dropdown">
<button class="dropbutton">Shop
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Accessories</a>
<a href="#">Shoes</a>
<a href="#">Clothing</a>
<a href="#">Bags</a>
</div>
</div>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
</div>
</body>
</html>
Output:
Donate to support writers
You may be interested in the following topics: