I’ve been playing with a design that required an attractive seeking multi-level dropdown menu using CSS. So today, I decided to write a tutorial and show you such menu.
I also want to remind you that, I’ve created a similar kind of menu before which has the multi-level navigation bar with a dropdown that based on CSS only.
But now, I will build the menus that are more specific to advance level mega dropdown menus. If you are planning to develop an e-commerce website then this tutorial surely helps you. I will show you how to develop the long-lasting mega menu.
We will make 4 level submenus using CSS and bit of javascript. But, you will not be limited to level 4 and can easily create unlimited level by just copy and past few lines of code.
I will also explain your process of doing so. The process will be easier than you may think and you don’t need to write any more code.
Our excellent drop-down menu works well on all major browsers and mobile devices. This menu is straightforward and easy to implement on your website.
All you need to copy a few lines of CSS and Javascript and then add HTML unordered list. The unordered list will look like any other simple CSS menu or navigation. We define it as ul, li, and anchor link. The other thing, We will use CSS3 animations on hover that gives a nice look and feel.
How to Create CSS Multi Level Dropdown Menu
Let’s start with the XHTML Structure for our dropdown menu. We are going to use a cleanly nested list for this purpose. The list of links is always a great option to choose.
You should avoid using any generator because they are not SEO friendly and doesn’t work well in browsers that have Javascript disabled.
You can see the markup below have a series of nested ul and li. It’s simple hierarchical navigation which consists of multiple levels. To get identified, we will use the nav HTML5 element with an ID dm_multiLevel
<nav class="dm_multiLevel fixed">
<ul>
<li><a href="#">Shop <i class="fa fa-angle-down"></i></a>
<ul class="subMenu">
<li><a href="#">Electronic</a></li>
<li><a href="#">Fashion <i class="fa fa-angle-right"></i></a>
<ul class="subMenu">
<li><a href="#">Men <i class="fa fa-angle-right"></i></a>
<ul class="subMenu">
<li><a href="#">Shirts</a></li>
<li><a href="#">Jeans</a></li>
</ul>
</li>
<li><a href="#">Women <i class="fa fa-angle-right"></i></a>
<ul class="subMenu">
<li><a href="#">Shoes</a></li>
<li><a href="#">Accessories <i class="fa fa-angle-right"></i></a>
<ul class="subMenu">
<li><a href="#">Jewellery</a></li>
<li><a href="#">Watches</a></li>
<li><a href="#">Sunglasses</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Furniture</a></li>
</ul>
</li>
</ul>
</nav>
The above HTML Structure base on 4 levels of the drop-down menu. If you want to fix the menus at the top so they come accord while the user scrolls the page then you can simply add the class fixed. If you want to add a dropdown to any hyperlink, you simply just need to add the HTML code like this way and forget about any changes in CSS or Javascript.
<li><a href="#">Men <i class="fa fa-angle-right"></i></a>
<ul class="subMenu">
<li><a href="#">Shirts</a></li>
<li><a href="#">Jeans</a></li>
</ul>
</li>
The Style
Let’s get started with styling and first of all, we need to style the nav HTML5 element that has class dm_multiLevel. We will do add font size, height, and background color as per our need. The width should be 100%;
.dm_multiLevel {
width: 100%;
font-size: 1.1rem;
height: 3.6rem;
background: #763568;
}
If you want to add a sticky menu bar then you need to set the position to fixed and the value of top and left will be zero. Also, make sure to add z-index: 1000;
.dm_multiLevel.fixed{
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
Now we start with unordered list ul and we will do zero the default padding and margin. To align the menu centered, we will do use box-sizing and vertical alignment.
.dm_multiLevel ul{
box-sizing: inherit;
margin: 0;
padding: 0;
border: none;
font: inherit;
vertical-align: baseline;
}
Here’s we do some basic CSS for unordered list li and hyperlink. It only contains the color, background, and transition. We will continue to work on drop-down menu styles.
.dm_multiLevel ul li{
position: relative;
display: inline-block;
}
.dm_multiLevel>ul>li {
float: left;
}
.dm_multiLevel a {
display: inline-block;
padding: 1.2rem 1.8rem;
line-height: 1.2rem;
color: #FFF;
transition: .2s ease-out;
}
.dm_multiLevel a:hover, li.active{
background: #5B3256;
}
Style Dropdown Menu
Finally, we need to style the submit and we added the class submenu to ul. We set the position absolute and the value of top will be 100% whereas the left will be zero. The absolute position is necessary because it positioned the elements according to their containing blocks.
.dm_multiLevel ul.subMenu {
box-sizing: border-box;
position: absolute;
top: 100%;
left: 0;
width: 170%;
}
.dm_multiLevel ul.subMenu ul.subMenu{
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
The li and hyperlink of subMenu need some background and border so they look nicer.
.dm_multiLevel ul.subMenu li {
width: 100%;
background: #5B3256;
}
.dm_multiLevel ul.subMenu li a {
width: 100%;
padding: 1rem 1rem;
border-bottom: 1px solid rgba(0,0,0,.05);
border-top: 1px solid rgba(255,255,255,.1);
}
In the end, We need to see some background color for hover and active state of the multi-level menu.
.dm_multiLevel ul.subMenu li a:hover,
.dm_multiLevel ul.subMenu li.active>a {
background: #763568;
padding-left: 1.1rem;
}
The Javascript
We are not going to add tons of javascript. We need to add a few lines of code to hide and show the menu. First, we simply need to hide the submenu by using the hide(); javascript function. Make sure you should define the document ready function and place all the code inside it.
$( document ).ready(function() {
// Hide SubMenus.
$(".subMenu").hide();
});
When hovered the menu, we need to show the sub menu and we do it by using of hover function. The slide down function will be used to show the sub menu and the toggle class allows to activate the dropdown menu.
// Shows SubMenu when it's parent is hovered.
$(".subMenu").parent("li").hover(function () {
$(this).find(">.subMenu").not(':animated').slideDown(300);
$(this).toggleClass("active ");
});
Let’s hide and slide up the menu when the user leaves the mouse, and we do it by using simple mouse leave function.
// Hides SubMenu when mouse leaves the zone.
$(".subMenu").parent("li").mouseleave(function () {
$(this).find(">.subMenu").slideUp(150);
});
The final line of code to prevent scroll to top when clicking at anchor.
// Prevents scroll to top when clicking on achor
$("a[href=\"#\"]").click(function () {
return false;
});
We have done with the building excellent multi-level dropdown menu, but if you can’t get this work for any reason, you can find the demo link or download the source code.
The demo included the three different variations such as sticky, regular and footer. If you still have the issue, you can leave comments and let us know. If you got work this pretty well then also leave comments about your thoughts. We appreciate if you share this with your friends on social accounts.
