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

The mega menu includes the menus with dropdown menus. The dropdown will have a complete setup for creating rows and columns and adding content like this −

The mega menu i.e., the full-width dropdown menu in a navigation bar appears like this −

On clicking the Projects dropdown menu, the dropdown menu appears −

Set the Navigation Menu

We have set the menu links inside the <nav>

<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>
</nav>

Style the Menu and Links

The navigation menu and links are styled like this −

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;
}

Full-width Dropdown

Here is our dropdown with full-width. We have set different divs for rows and columns making it a mega dropdown −

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

Style the Button and Content for Thedropdown

Let us style the megamenu, including the button, content, etc −

.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;
}

Style the Column for the Dropdown

We have styled the columns for our mega menu dropdown. The direction is set to left and the links are also styled −

.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;
}

Create a Mega Menu

Example

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

<!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>
Updated on: 2023-10-27T11:31:35+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements