How to Create a Mega Menu

Mega Menu with HTML & CSS

A mega menu is a large dropdown menu with multiple sections, perfect for e-commerce websites or complex navigation structures. Below is a fully responsive mega menu built using HTML and CSS only.

Step 1: HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Mega Menu</title>
    <meta name="description" content="Learn how to create a responsive mega menu using HTML and CSS. A modern dropdown navigation with multiple columns.">
    <meta name="keywords" content="mega menu, responsive mega menu, HTML CSS navigation, dropdown menu, CSS menu design">
    
</head>
<body>

    <!-- Navigation Bar -->
    <div class="navbar">
        <a href="#">Home</a>
        <div class="dropdown">
            <a href="#">Categories ⌄</a>
            <div class="mega-menu">
                <div class="menu-column">
                    <h3>Web Development</h3>
                    <a href="#">HTML</a>
                    <a href="#">CSS</a>
                    <a href="#">JavaScript</a>
                    <a href="#">React</a>
                </div>
                <div class="menu-column">
                    <h3>Programming</h3>
                    <a href="#">Python</a>
                    <a href="#">Java</a>
                    <a href="#">C++</a>
                    <a href="#">PHP</a>
                </div>
                <div class="menu-column">
                    <h3>Design</h3>
                    <a href="#">UI/UX</a>
                    <a href="#">Figma</a>
                    <a href="#">Photoshop</a>
                    <a href="#">Illustrator</a>
                </div>
            </div>
        </div>
        <a href="#">Blog</a>
        <a href="#">Contact</a>
    </div>

</body>
</html>

Step 2: CSS Code

* {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           font-family: Arial, sans-serif;
       }

       body {
           background-color: #f4f4f4;
       }

       /* Navigation Bar */
       .navbar {
           background-color: #333;
           display: flex;
           padding: 15px;
       }

       .navbar a {
           color: white;
           text-decoration: none;
           padding: 14px 20px;
           display: block;
           font-size: 18px;
       }

       .navbar a:hover {
           background-color: #555;
       }

       /* Mega Menu Wrapper */
       .dropdown {
           position: relative;
       }

       .mega-menu {
           position: absolute;
           top: 100%;
           left: 0;
           background-color: white;
           width: 100%;
           display: none;
           padding: 20px;
           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
       }

       .dropdown:hover .mega-menu {
           display: flex;
       }

       .mega-menu .menu-column {
           flex: 1;
           padding: 10px;
       }

       .mega-menu h3 {
           font-size: 18px;
           margin-bottom: 10px;
           color: #333;
       }

       .mega-menu a {
           display: block;
           padding: 5px 0;
           color: #333;
           text-decoration: none;
       }

       .mega-menu a:hover {
           color: #007BFF;
       }

       /* Responsive Design */
       @media (max-width: 768px) {
           .mega-menu {
               flex-direction: column;
               width: 100%;
           }
       }

Explanation

Navigation Bar
- The .navbar uses flexbox for layout.
- Links are styled with padding and a hover effect.
Mega Menu Layout
- The .mega-menu appears when the “Categories” link is hovered.
- It contains multiple sections (columns) for easy navigation.
Responsive Design
- The menu adapts for mobile screens with @media (max-width: 768px).
- The flexbox layout changes to a stacked column format.

Mega Menu with HTML & CSS

Step 1: HTML Code

Step 2: CSS Code

Explanation

Leave a Reply Cancel reply