How to Create Mega Dropdown Menu Using Pure CSS

Mega Dropdown menu, or also commonly called Mega Menu is the type of dropdown menu which is displaying the large dropdown when it hovered or clicked.

The dropdown in mega menu usually contains many links, and sometime it contains other elements like paragraph, description, logo and banner.

When you should implement mega dropdown menu ?

Every UI element has their own best practices. And Mega dropdown menu is very suitable if used in :

  1. Ecommerce Website, to display product categories, featured products, reviews and other navigations.
  2. News Website, to display news categories, subdomain site links, and other.
  3. Goverment Website, to display many link of pages
  4. Another big website, which has complex structured website and a lot of links.

From the list above, we can conlude that mega dropdown menu is suitable for big sites. It’s not recommended to be implemented in small scale of website like blog, profile site, portfolio site, etc.

How to create mega dropdown menu with pure CSS3

Okay, now i will discuss about how to make it. I will explain to you step by step. But first, please see the live demo and download the file bundle through the links below.

Mega Menu Dropdown

After that, extract the file bundle and open it on the your source code editor. You have to see the code live while i explain every step in order to understand it easily.

The Differences of Mega Dropdown Menu and Common Dropdown Menu

The basic concept of mega dropdown menu is similar with the common dropdown menu, that is using pseudo class :hover in <li> selector. The difference lies in position: css property value for <li> and the HTML markup of dropdown.

The difference position value between mega dropdown menu and common dropdown menu

.mega-dropdown-menu >ul {
position:relative;
}
.mega-dropdown-menu >ul >li {
position:static; /* The default position for every selector */
}
.common-dropdown-menu>ul >li {
position:relative;
}

position: property for <li> in common dropdown menu has relative; value, otherwise in mega dropdown menu it must be static; (position:static; is the default value, so it doesn’t need to declared again).

While, <ul> tag or the container for main menu must be have relative position. This is to make the mega dropdown which has absolute position (position:absolute) has maximal width or full width, not limited by width of <li> tag.

To understanding more about characteristic of every position, you can read this post : Introduction of CSS position.

The Difference in HTML Markup of Dropdown

The difference in HTML markup is concerning about the use of unordered list tag and ordinary div markup. In common dropdown menu, <ul> tag is used to make the list of dropdown menu. Otherwise in mega dropdown menu, <div> tag is used to make the mega dropdown so it can be contained by any tag of HTML.

<li><a href=”#”>Parent Menu</a>
<ul>/*The content of common dropdown menu, with list tag*/</ul>
</li>
<li><a href=”#”>Parent Menu</a>
<div>/* The content of mega dropdown menu, with any tag of html*/</div>
</li>

Codes

After we discussed about the concept and the difference from common dropdown menu, now i will explain about the codes. We will begin with HTML.

HTML

In this tutorial, the mega menu has 3 columns of content. But, i will not explain about the dropdown content because it just example.

For every dropdown, i give them ‘menu-detail‘ class as a selector for mega dropdown style we will make. The other class in same div (like ‘profile‘) is just for styling in each dropdown.

<div class=”mega-menu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Profile</a>
<div class=”menu-detail profile”>
<div class=”section section-1″>
<h3 class=”section-title”>Section 1</h3>
<div class=”section-content”>
<p>Lorem ipsum dolor Sit amet, lorem-loreman amets sit dolor. Malu vouse dosum la quiz. Mad wasim do metam la giu dolor. Dolor la samoi jud huuta la qui. Mad wasim do metam la giu dolor. Lorem ipsum dolor Sit amet, lorem-loreman amets sit dolor. Malu vouse dosum la quiz. Dolor la samoi jud huuta la qui.Mad wasim do metam la giu dolor. Lorem ipsum dolor Sit amet, lorem-loreman amets sit dolor.</p>
</div>
</div>
<div class=”section links”>
<h3>Links</h3>
<ul>
<li><a href=”#”>About Me</a></li>
<li><a href=”#”>About Blog</a></li>
<li><a href=”#”>Portfolio</a></li>
<li><a href=”#”>Contact/Hire Me</a></li>
<li><a href=”#”>Curriculum Vitae</a></li>
</ul>
</div>
<div class=”section social-media”>
<h3>Social Media Profile</h3>
<ul>
<li class=”facebook”><a href=”#”>Me on Facebook</a></li>
<li class=”twitter”><a href=”#”>Me on Twitter</a></li>
<li class=”googleplus”><a href=”#”>Me on Google+</a></li>
<li class=”linkedin”><a href=”#”>Me on LinkedIn</a></li>
<li class=”dribbble”><a href=”#”>Me on Dribbble</a></li>
</ul>
</div>
</div>
</li>
<li><a href=”#”>Categories</a>
<div class=”menu-detail categories”>
<div class=”section seo”>
<h3><a href=”#”>Search Engine Optimization</a></h3>
<ul>
<li><a href=”#”>Link Building</a></li>
<li><a href=”#”>SEO Tools</a></li>
<li><a href=”#”>SEO News</a></li>
<li><a href=”#”>Study Cases</a></li>
<li><a href=”#”>SEO On-page</a></li>
</ul>
</div>
<div class=”section copywrite”>
<h3><a href=”#”>Blogging</a></h3>
<ul>
<li><a href=”#”>Blogger Tricks & Tutorial</a></li>
<li><a href=”#”>Wordpress Tricks & Tutorial</a></li>
<li><a href=”#”>Content Strategies</a></li>
<li><a href=”#”>Make Money Blogging</a></li>
<li><a href=”#”>Blog Design</a></li>
</ul>
</div>
<div class=”section im”>
<h3><a href=”#”>Internet Marketing</a></h3>
<ul>
<li><a href=”#”>List Building</a></li>
<li><a href=”#”>Copy Writing</a></li>
<li><a href=”#”>Social Media Marketing</a></li>
<li><a href=”#”>Content Marketing</a></li>
<li><a href=”#”>Interview the Gurus</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>

CSS Styling

I separate the CSS styling in some section in order to understand it easily. First, we will discuss about menu styling before it hovered.

.mega-menu, .mega-menu >ul {
position: relative;
background-color: #333;
height: 50px;
}
.mega-menu >ul >li {
display: inline-block;
padding:15.5px 0;
overflow: hidden;
}
.mega-menu >ul >li >a {
padding:17px;
color:#eee;
text-decoration: none;
}
.mega-menu >ul >li:hover {
background-color: #3399dd;
-webkit-transition:ease 0.3s;
}
.mega-menu .menu-detail {
height: 0;
visibility: hidden;
opacity: 0;
position: absolute;
}

As you see above, i highlight the last few lines of code with the red color. These codes is for mega dropdown styling ( with  .menu-detail class before it hovered.

position:absolute; must be declared for dropdown. While, visibility:hidden; and opacity:0 added to allow us to create transition effect for the dropdown when it hovered.

And to make a slide down transition, then we must declare the height of dropdown to 0 value (height:0) before it hovered. After that, when the menu hovered, the height of dropdown must be declared with the fixed height.

In this tutorial, i set 300 pixel for height (height:300px) when the menu hovered, as you see in the codes below.

.mega-menu >ul >li:hover >div.menu-detail {
opacity: 1;
height: 300px;
width:100%;
visibility: visible;
top:50px;
right:0;
left: 0;
z-index: 99;
background-color: #252525;
color:#fff;
-webkit-transition:height 1s;
-moz-transition:height 1s;
transition:height 1s;

border-top:3px solid #3399dd;
overflow: hidden;
}

The orange codes are the reverse for .menu-detail styling before the menu hovered. It use to display mega dropdown which is hidden before hovered.

The green codes added for dropdown position. The top range of dropdown is 50 pixel (top:50px) because the height of container for parent meny is 50 pixel too, (See the first css codes in line 4). While, the right and the left range are 0 pixel.

The blue codes are to make dropdown menu unobstructed by the other element below the menu. It will pile up over the other element. But, if it still obstructed,  Jika masih terhalang, increase the value become 9999; or more.

And the red codes are for the transition effect, In this case for Mozilla Firefox using -moz-,  Old google chrome using -webkit- and the other browser that supported.

Then, we styling the mega dropdown.

.menu-detail .section {
padding:20px;
}
@media (min-width: 768px){
.menu-detail.profile .section-1 {
width:40%;
float: left;
}
.menu-detail.profile .links {
width:20%;
float: left;
}
.menu-detail.profile .social-media {
width:40%;
float: left;
}
.menu-detail.categories .seo {
width:33.33%;
float: left;
}
.menu-detail.categories .copywrite {
width:33.33%;
float: left;
}
.menu-detail.categories .im {
width:33.33%;
float: left;
}}
.menu-detail .links ul li {
padding:10px 0;
display: block;
}
.menu-detail .links ul li a{
color:#3399dd;
text-decoration: none;
}
.menu-detail .links ul li a:hover {
color:#2c73cc;
}.menu-detail .social-media ul li {
display: block;
margin-bottom: 5px;
}
.menu-detail .social-media ul li a{
color:#fff;
text-decoration: none;
display: block;
width: 100%;
padding:7px 10px;
}
.social-media li.facebook {
background-color: #48649f;
}
.social-media li.twitter {
background-color: #3399dd;
}
.social-media li.googleplus {
background-color: #cc3333;
}
.social-media li.linkedin {
background-color: #2c73cc;
}
.social-media li.dribbble {
background-color: #dd3355;
}
.menu-detail.categories .section h3 a{
color:#fff;
}
.menu-detail.categories .section ul li {
padding:10px 0;
display: block;
}
.menu-detail.categories .section ul li a{
color:#3399dd;
text-decoration: none;
}
.menu-detail.categories .section ul li a:hover {
color:#2c73cc;
}

Because the codes above are surely will be placed by your own codes, so i think i don’t need to explain about this codes.

Finished.

Not too difficult, right ?

If you have another technique to create this mega menu, i will be pleased if you share it in the comment below.

Hope this useful. Good luck 🙂

1 Comment

  1. thanks for sharing, i save it for later.
    i think my website is still small enough, not ready for this.. but thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *