Làm cách nào để tạo một menu lớn (menu thả xuống toàn chiều rộng trong thanh điều hướng) bằng HTML và CSS?

Sau đây là mã để tạo một menu lớn bằng HTML và CSS -

Ví dụ

<!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>