How to create a mega menu (full-width dropdown menu in a navigation bar) with HTML and CSS?

Following is the code to create a mega menu using HTML and CSS −

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
   margin: 0;
   padding: 0;
}
*,*::before,*::after{
   box-sizing: border-box;
}
nav {
   overflow: hidden;
   background-color: rgb(2, 161, 127);
   font-family: Arial, Helvetica, sans-serif;
}
nav a {
   float: left;
   font-size: 16px;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
}
.dropdown {
   float: left;
   overflow: hidden;
}
.dropdown .megaButton {
   font-size: 16px;
   border: none;
   outline: none;
   color: white;
   padding: 14px 16px;
   background-color: inherit;
   font: inherit;
   margin: 0;
}
nav a:hover, .dropdown:hover .megaButton {
   background-color: rgb(0, 63, 146);
}
.megaContent {
   text-align: center;
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   width: 100%;
   left: 0;
   z-index: 1;
}
.megaContent .megaHeader {
   background: rgb(119, 6, 194);
   padding: 16px;
   color: white;
}
.dropdown:hover .megaContent {
   display: block;
}
.megaColumn {
   float: left;
   width: 50%;
   padding: 10px;
   background-color: rgb(233, 255, 198);
   height: 250px;
}
.megaColumn .links {
   color: black;
   padding: 16px;
   margin:10px;
   text-decoration: none;
   display: block;
   text-align: left;
   border-bottom: 4px solid rgb(69, 0, 90);
}
.megaColumn a:hover {
   background-color: lightblue;
}
/*Float reset trick for clearing floats*/
.megaRow:after {
   content: "";
   display: table;
   clear: both;
}
</style>
</head>
<body>
<nav>
<a class="links" href="#">Home</a>
<a class="links" href="#">About</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
<div class="dropdown">
<button class="megaButton">Projects ></button>
<div class="megaContent">
<div class="megaHeader">
<h2>Projects Menu</h2>
</div>
<div class="megaRow">
<div class="megaColumn">
<h3>Commercial</h3>
<a class="links" href="#">Project 1</a>
<a class="links" href="#">Project 2</a>
</div>
<div class="megaColumn">
<h3>Non-Commerial</h3>
<a class="links" href="#">Project 1</a>
<a class="links" href="#">Project 2</a>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>