Skip to content

Instantly share code, notes, and snippets.

@anjanesh

anjanesh/mega-menu.html

Created January 9, 2021 12:27
Show Gist options
  • Save anjanesh/876b781b69fff9598fd73ffeda4b9318 to your computer and use it in GitHub Desktop.
Save anjanesh/876b781b69fff9598fd73ffeda4b9318 to your computer and use it in GitHub Desktop.
Download ZIP
Mega Menu using CSS only
Raw
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>
@anjanesh
Copy link
Author

anjanesh commented Jan 9, 2021

https://stackoverflow.com/a/63919903/126833

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment