How to create a subnavigation menu with CSS?
The sub-navigation menu refers to sub-categories defined under the main menu navigations. Modern websites contain lots of information. We cannot keep links to all information on the main menu.
So, we can categories it into a sub-menu and navigate it through the main menu. It can be created using HTML elements and CSS styling.
Creating a sub-menu navigation
To create a navbar with <div> element, add links within it using <a> tag. To create a sub-menu, define a <div> element with class="sub-menu" , add a <button> to it to toggle the sub-menu and add links within another <div> for the sub-menu contents.
- The
display: none property is added to the content of the sub-menu which will hide the sub-menu content by default.
- The
:hover class is added with display: block to show sub-menu content on hover.
- To position the sub-menu content below the main menu use
position: absolute and z-index=1.
- Add
padding, background-color, margin , font-size, etc to customize the navbar and its element.
Example: Creating a sub-menu navigation
In this example, the sub-menu navigation is placed horizontally below the main menu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbar {
overflow: hidden;
background-color: #215612;
width: 100%;
}
.navbar a {
float: left;
text-decoration: none;
font-size: 15px;
color: white;
text-align: center;
padding: 15px 16px;
}
.sub-menu {
float: left;
overflow: hidden;
}
.sub-menu .btn {
font-size: 16px;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
border: none;
}
.navbar a:hover, .sub-menu:hover, .btn {
background-color: black;
}
.content {
display: none;
position: absolute;
left: 7px;
background-color: black;
width: 50%;
z-index: 1;
}
.content a {
float: left;
color: white;
text-decoration: none;
}
.content a:hover {
background-color: #eee;
color: black;
}
.sub-menu:hover .content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#"> Home </a>
<div class="sub-menu">
<button class="btn">Course <i class="fa fa-caret-down"></i></button>
<div class="content">
<a href="#"> C++ </a>
<a href="#"> Java </a>
<a href="#"> HTML </a>
</div>
</div>
<div class="sub-menu">
<button class="btn">Study material <i class="fa fa-caret-down"></i></button>
<div class="content">
<a href="#"> Notes </a>
<a href="#"> Answers </a>
<a href="#"> MCQ </a>
</div>
</div>
<a href="#"> Contact </a>
</div>
</body>
</html>
Output
Here is the output of the above example.
Example: Sub-menu aligned vertically below the main menu
In this example, we have created sub-menu navigation with a dropdown. To do so, we have removed the float property of links within the sub-menu with float: none property and added a display: block property. Also added box-shadow property to sub-menu.
Conclusion
In this tutorial, we have created sub-menu navigation with CSS. The sub-menu can be aligned horizontally or vertically below the main menu. Both types have been explained with examples.
