Article Categories

Selected Reading

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

CSS HTML Web Development Front End Technology

A mega menu is a full-width dropdown menu that provides an expanded navigation structure with multiple columns, rows, and content sections. It's commonly used on websites to organize large amounts of navigation options in an accessible and visually appealing way.

Syntax

.dropdown {
    position: relative;
}

.mega-content {
    display: none;
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 1;
}

.dropdown:hover .mega-content {
    display: block;
}

HTML Structure

The mega menu requires a structured HTML layout with navigation links and dropdown containers −

<nav>
    <a href="#">Home</a>
    <a href="#">About</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 href="#">Project 1</a>
                    <a href="#">Project 2</a>
                </div>
                <div class="megaColumn">
                    <h3>Non-Commercial</h3>
                    <a href="#">Project 1</a>
                    <a href="#">Project 2</a>
                </div>
            </div>
        </div>
    </div>
</nav>

Complete Mega Menu Example

Here's a complete working example of a mega menu with full-width dropdown −

<!DOCTYPE html>
<html>
<head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    nav {
        overflow: hidden;
        background-color: #029f7f;
        font-family: Arial, 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;
        cursor: pointer;
    }

    nav a:hover,
    .dropdown:hover .megaButton {
        background-color: #003f92;
    }

    .megaContent {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        width: 100%;
        left: 0;
        z-index: 1;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    }

    .megaContent .megaHeader {
        background: #7706c2;
        padding: 16px;
        color: white;
        text-align: center;
    }

    .dropdown:hover .megaContent {
        display: block;
    }

    .megaRow {
        display: flex;
        padding: 20px;
    }

    .megaColumn {
        flex: 1;
        padding: 10px;
        background-color: #e9ffc6;
        margin: 0 10px;
        min-height: 200px;
    }

    .megaColumn h3 {
        color: #333;
        margin-bottom: 15px;
        border-bottom: 2px solid #7706c2;
        padding-bottom: 5px;
    }

    .megaColumn a {
        color: #333;
        padding: 8px 0;
        text-decoration: none;
        display: block;
        border-bottom: 1px solid #ccc;
        transition: background-color 0.3s;
    }

    .megaColumn a:hover {
        background-color: #d4edda;
        padding-left: 10px;
    }
</style>
</head>
<body>

<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
    <div class="dropdown">
        <button class="megaButton">Projects ?</button>
        <div class="megaContent">
            <div class="megaHeader">
                <h2>Our Projects</h2>
            </div>
            <div class="megaRow">
                <div class="megaColumn">
                    <h3>Commercial</h3>
                    <a href="#">Web Development</a>
                    <a href="#">Mobile Apps</a>
                    <a href="#">E-commerce Sites</a>
                </div>
                <div class="megaColumn">
                    <h3>Open Source</h3>
                    <a href="#">GitHub Projects</a>
                    <a href="#">Community Tools</a>
                    <a href="#">Documentation</a>
                </div>
            </div>
        </div>
    </div>
</nav>

<div style="padding: 20px;">
    <h1>Mega Menu Demo</h1>
    <p>Hover over "Projects" in the navigation to see the mega menu dropdown.</p>
</div>

</body>
</html>

A navigation bar with Home, About, Contact, and Projects links appears. When hovering over "Projects", a full-width dropdown menu displays with a purple header "Our Projects" and two columns: "Commercial" (with Web Development, Mobile Apps, E-commerce Sites) and "Open Source" (with GitHub Projects, Community Tools, Documentation). The dropdown has a subtle shadow and smooth hover effects.

Key Features

Feature	CSS Property	Purpose
Full Width	`width: 100%`	Spans entire viewport width
Positioning	`position: absolute`	Overlays content below navigation
Hover Effect	`:hover` pseudo-class	Shows/hides dropdown on interaction
Layout	`display: flex`	Creates responsive column structure

Conclusion

Mega menus provide an excellent solution for organizing complex navigation structures. By combining absolute positioning, hover effects, and flexbox layouts, you can create professional full-width dropdown menus that enhance user experience and site navigation.

AmitDiwan

Updated on: 2026-03-15T14:21:36+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next