anjanesh/mega-menu.html

## mega-menu.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<title>Mega Menu using CSS only</title>
<style type="text/css">
body { font-family: Roboto; font-weight: normal; }
.flex
{
    display:flex;
    flex-direction: row;
}
#top-1
{
    height:701px;
    padding-top: 20px;
}

#top-menu-1, #top-menu-2
{
    /*
    This is because I've given
    margin-left: -50px;
    for
    #top-menu-1 > div > div
    */
    margin-left: 50px;

    /* justify-content: space-around; */
}
#top-menu-1 > div
{
    position:relative;
}
#top-menu-1 > div > a
{
    font-size: 24px;
    padding:15px 15px;
    color:#000;
    text-decoration:none;
}

#top-menu-1 > div > a:hover + div,
#top-menu-1 > div > a + div:hover
{
    display:block;
}

#top-menu-1 > div > div
{
    position: absolute;
    margin-top:10px;
    margin-left: -50px;
    display:none;
    box-sizing: border-box;
    width: 900px;
    height-: 327px;
    border-radius: 6px;
    box-shadow: 0 0 17px 0 rgba(0, 0, 0, 0.22);
    background-color: #ffffff;
    padding:20px;
    z-index: 1;

}
#top-menu-1 > div > div > h3
{
    font-size: 25px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #f05b30;
}
#top-menu-1 > div > div > h3 > span
{
    color: #282828;
}
#top-menu-1 > div > div > div.flex
{
    flex-wrap:wrap;
}
#top-menu-1 > div > div > div.flex > div
{
    width:33%;
}
#top-menu-1 > div > div > div.flex > div > h4
{
    font-size:18px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.56;
    letter-spacing: normal;
    color: #282828;
    padding:0;
    margin:0;
}
#top-menu-1 > div > div > div.flex > div > p
{
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    color: #6f6f6f;
}
</style>
</head>
<body>
<section id="top-1">
    <div id="top-menu-1" class="flex">
        <div>
            <a href="#">Products</a>
            <div>
                <h3>Products <span>Suite</span></h3>
                <div class="flex">
                    <div>
                        <h4>Inner Heading 1.1</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 1.2</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 1.3</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 1.4</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 1.5</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 1.6</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <a href="#">Solutions</a>
            <div>
                <h3>Solutions <span>Suite</span></h3>
                <div class="flex">
                    <div>
                        <h4>Inner Heading 2.1</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 2.2</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 2.3</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 2.4</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 2.5</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 2.6</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <a href="#">Support</a>
            <div>
                <h3>Support <span>Suite</span></h3>
                <div class="flex">
                    <div>
                        <h4>Inner Heading 3.1</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 3.2</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 3.3</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 3.4</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 3.5</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 3.6</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <a href="#">Company</a>
            <div>
                <h3>Company <span>Suite</span></h3>
                <div class="flex">
                    <div>
                        <h4>Inner Heading 4.1</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 4.2</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 4.3</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 4.4</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 4.5</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                    <div>
                        <h4>Inner Heading 4.6</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non incidunt, sit, sunt aspernatur consectetur quae adipisci voluptate ducimus dolores sequi accusantium praesentium amet delectus ipsa esse qui dolorem perspiciatis optio.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
</html>