How to create a mega menu using HTML and CSS ?

Last Updated : 28 Nov, 2021

HTML is a markup language used to create web pages and CSS is a stylesheet language used to design a document written in a markup language such as HTML. In this article, we are going to know how can we create a mega menu on our web page with the help of only HTML and CSS. Mega menus are a type of expandable menu in which many choices are displayed in a row. We have to create a menu that appears when the user moves the mouse over an element inside a navigation bar.

Steps to create a mega menu

Create an HTML file: Create a navigation menu and use a button as a menu in the navbar to work as a mega menu as shown below code.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
    "width=device-width, initial-scale=1.0"> 
    <title>Mega Menu</title> 
    <link rel="stylesheet" href="menu.css"> 
</head> 
<body> 
  
  <!-- Created a div for navigation bar-->
    <div class="navigationBar"> 
        
       <!-- Created a button to work as a menu-->
        <div class="downMenu"> 
          <button class="downBtn"> 
            <a href="#">Mega Menu 1</a> 
          </button> 
          <div class="downMenu-content"> 
              
             <!-- Added items in mega menu 1-->
              <div class="megaMenu"> 
                  
                <!-- Column 1-->
                <div class="menuCol"> 
                  <a href="#">Menu 1 Col 1 Item 1</a> 
                  <a href="#">Menu 1 Col 1 Item 2</a> 
                  <a href="#">Menu 1 Col 1 Item 3</a> 
                  <a href="#">Menu 1 Col 1 Item 4</a> 
                  <a href="#">Menu 1 Col 1 Item 5</a> 
                </div> 
  
                <!-- Column 2-->
                <div class="menuCol"> 
                  <a href="#">Menu 1 Col 2 Item 1</a> 
                  <a href="#">Menu 1 Col 2 Item 2</a> 
                  <a href="#">Menu 1 Col 2 Item 3</a> 
                  <a href="#">Menu 1 Col 2 Item 4</a> 
                  <a href="#">Menu 1 Col 2 Item 5</a> 
                </div> 
  
                <!-- Column 3-->
                <div class="menuCol"> 
                  <a href="#">Menu 1 Col 3 Item 1</a> 
                  <a href="#">Menu 1 Col 3 Item 2</a> 
                  <a href="#">Menu 1 Col 3 Item 3</a> 
                  <a href="#">Menu 1 Col 3 Item 4</a> 
                  <a href="#">Menu 1 Col 3 Item 5</a> 
                </div> 
              </div> 
          </div> 
        </div> 
  
      <!-- Created another button to work as a menu-->
        <div class="downMenu"> 
          <button class="downBtn"> 
            <a href="#">Mega Menu 2</a> 
          </button> 
          <div class="downMenu-content"> 
              
            <!-- Added items in mega menu 2-->
              <div class="megaMenu"> 
                  
                <!-- Column 1-->
                <div class="menuCol"> 
                  <a href="#">Menu 2 Col 1 Item 1</a> 
                  <a href="#">Menu 2 Col 1 Item 2</a> 
                  <a href="#">Menu 2 Col 1 Item 3</a> 
                  <a href="#">Menu 2 Col 1 Item 4</a> 
                  <a href="#">Menu 2 Col 1 Item 5</a> 
                </div> 
              
                <!-- Column 2-->
                <div class="menuCol"> 
                  <a href="#">Menu 2 Col 2 Item 1</a> 
                  <a href="#">Menu 2 Col 2 Item 2</a> 
                  <a href="#">Menu 2 Col 2 Item 3</a> 
                  <a href="#">Menu 2 Col 2 Item 4</a> 
                  <a href="#">Menu 2 Col 2 Item 5</a> 
                </div> 
  
                <!-- Column 3-->
                <div class="menuCol"> 
                  <a href="#">Menu 2 Col 3 Item 1</a> 
                  <a href="#">Menu 2 Col 3 Item 2</a> 
                  <a href="#">Menu 2 Col 3 Item 3</a> 
                  <a href="#">Menu 2 Col 3 Item 4</a> 
                  <a href="#">Menu 2 Col 3 Item 5</a> 
                </div> 
              </div> 
          </div> 
          </div> 
      </div> 
      
</body> 
</html>

Create a CSS file: Design your navigation bar and mega menu through CSS and link that file into your HTML page. The following is the content for the file “menu.css” used in the above HTML file.

menu.css

/* For navigation menu */
.navigationBar { 
    background-color: rgb(65, 122, 230); 
    overflow: hidden; 
} 
    
/* For texts in navigation bar */
.navigationBar a { 
    font-size: 20px; 
    color: white; 
} 
    
/* The dropdown div */
.downMenu { 
    float: left; 
    overflow: hidden; 
} 
    
/* For downButton to work as menu */
.downMenu .downBtn { 
    padding: 15px 15px; 
    background-color: inherit; 
} 
    
/* For hover effect on button */
.navigationBar a:hover, .downMenu:hover .downBtn { 
    background-color: rgb(65, 61, 61); 
} 
    
/* To hide mega menu */
downMenu-content { 
    position: absolute; 
    display: none; 
    width: 100%; 
} 
    
/* To show mega menu on hover */
.downMenu:hover .downMenu-content { 
    display: block; 
} 
    
/* Create columns in mega menu*/
.menuCol { 
    float: left; 
    width: 30%; 
    padding: 10px; 
    background-color: rgb(197, 189, 189); 
} 
  
/* Style the columns */
.menuCol a { 
    float: none; 
    color: black; 
    padding: 10px; 
    margin-bottom: 20px; 
    display: block; 
} 
  
/* Add hover */
.menuCol a:hover { 
    background-color: rgb(223, 223, 223); 
} 