Home/Explore/

Mega menu

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
Move the mouse over the seccond navigation item to see the mega menu.
<style>
.p-mega-menu-container {
    /* Used to position the mega menu */
    position: relative;
}

.p-mega-menu-content {
    /* Border */
    border: 1px solid rgba(0, 0, 0, 0.3);
    margin-top: -1px;

    /* Hidden by default */
    display: none;

    /* Absolute position */
    left: 0px;
    position: absolute;
    top: 100%;

    /* Take full width */
    width: 100%;

    /* Displayed on top of other elements */
    background: #fff;
    z-index: 9999;
}

.p-mega-menu-trigger:hover .p-mega-menu-content {
    /* Show the mega menu when hovering the trigger item */
    display: block;
}
</style>

<div class="p-mega-menu-container">
    <!-- Item -->
    ...

    <!-- An item that triggers displaying the mega menu -->
    <div class="p-mega-menu-trigger">
        <!-- The trigger item's content -->
        <div>...</div>

        <!-- Mega menu -->
        <div class="p-mega-menu-content">
            ...
        </div>
    </div>
</div>

Related patterns

Dropdown

Menu

Nested dropdowns

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!