Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Mega Menu using CSS only
<!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>
@anjanesh

This comment has been minimized.

Copy link
Owner Author

@anjanesh anjanesh commented Jan 9, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.