Every website needs a navigation bar for implements dropdown menus. This dropdown menu can be a mega menu or a 1-row menu. So it is easy to implement a 1-row menu but it is complicated to create a mega menu in navbar items.
In this article, you will learn to create dropdown megamenu. We are going to display the mega menu on the list item hover.
Here I am going to use a table for creating a mega menu this table is a child of the navbar list-item, you can also create a mega menu with the use of div tags but it is easy to use a table as a mega menu.
You can create a table according to your choice. First, create a navbar and add unorderlist(ul) in it then create a table in any list item.
Step1: create a table according to your choice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<nav>
<div class="nav_div">
<ul>
<li class="li" id="li1">MegaMenu
<table class="table1" >
<tr><th>Web development<hr></th><th>App development<hr></th><th>UI design<hr></th><th>Blogging<hr></th></tr>
<tr><td>Shopping site</td><td>Native apps</td><td>Logo design</td><td>Programminng blog</td></tr>
<tr><td>business Site</td><td>Web apps</td><td>Landing pages</td><td>Affiliate blogs</td></tr>
<tr><td>Blogging site</td><td>IOS apps</td><td>Brand design</td><td>business blog</td></tr>
<tr><td>React native site</td><td></td><td>Web and app UI Design</td><td>Shopping blog</td></tr>
<tr><td>Responsive site</td></tr>
</table>
</li>
<li class="li" id="li2">Service</li>
<li class="li" id="li3">Carrer</li>
</ul>
</div>
</nav>
</body>
</html>We are going to display a table when the user hovers on a list item so that purpose first set table display as none and on the list, item hover set table as display Block, Set curser as a pointer on list item hover. Style your table for looks better. You can also add icons using i tag in the table.
Step2: Add CSS
li{
display: inline-block;
margin-left: 25px;
font-weight: bold;
font-size: 1.2em;
padding-bottom: 20px;
}
nav{
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.table1{
position: absolute;
font-size: medium;
background-color: white;
border-top: 3px solid dodgerblue;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
color: black;
display: none;
margin-top: 20px;
}
#li1:hover .table1{
display: block;
}
#li1:hover{
cursor: pointer;
}
th,td{
padding: 15px;
}
th{
color:dodgerblue;
}
hr{
width: 35px;
margin-left: 0px;
margin-top: 20px;
margin-bottom: -10px;
color: black;
border-color: rgb(0, 0, 0);
background-color: rgb(0, 0, 0);
}
.table1 td:hover{
color: rgb(255, 0, 0);
}
Output:
So in this way, you can create different types of dropdown mega menus using the table. you can also display the table only when the user clicks on any item.
So in this way, we can create a dropdown mega menu only using HTML and CSS.
Leave a comment if you had any queries regarding this post and I will reply as soon as possible. Anyway, if you enjoy reading my content, you can subscribe to my blog to receive all the latest updates. Happy Learning!
Share this article with your friends✌!!
0 Comments