CSS Only Responsive Multi-level Mega Menu

This pure CSS code snippet helps you to create a responsive multi-level mega menu. It uses HTML nested lists and a hover pseudo selector to show dropdowns. The menu comes with a horizontal list of links and vertical dropdown lists. The background color and font size can be customized according to your needs.

How to Create CSS Only Responsive Multi-level Mega Menu

1. First of all, create a div element with a class name “main” and place an unordered list of links inside it. Add a class name “subs” to a li element in which you want to place a dropdown and create a ul element inside it with a class name “dropdown”. Similarly, you can create multi-level dropdowns by following the same method. Therefore, the following is the complete HTML structure for the multilevel mega menu:

<div class="main">
            <ul class="mainnav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="hassubs"><a href="#">Services</a>
                    <ul class="dropdown">
                        <li class="subs"><a href="#">Web Development</a></li>
                        <li class="subs"><a href="#">Mobile Apps</a></li>
                        <li class="subs hassubs"><a href="#">Designing</a>
                            <ul class="dropdown">
                                <li class="subs"><a href="#">Web Design</a></li>
                                <li class="subs"><a href="#">Graphic Design</a></li>
                                <li class="subs"><a href="#">Logo Design</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Gallery</a></li>
                <li class="hassubs"><a href="#">Contact</a>
                    <ul class="dropdown">
                        <li class="subs"><a href="#">Email</a></li>
                        <li class="subs hassubs"><a href="#">Address</a>
                            <ul class="dropdown">
                                <li class="subs"><a href="#">Head Office</a></li>
                                <li class="subs"><a href="#">Registered Office</a></li>
                                <li class="subs"><a href="#">Locate us</a></li>
                            </ul>
                        </li>
                        <li class="subs"><a href="#">Phone</a></li>
                    </ul>
                </li>
            </ul>
            <br style="clear: both;">
        </div>

2. Style the multi-level mega menu using the following CSS styles. You can set the custom values for the background color, font size, and height of the menu in order to customize the menu.

.main{
	width: 100%;
	background: #eee;
}
/*General Menu Styling*/
.mainnav {
	margin: 0 auto
}

li {
	list-style: none;
}

li a {
	text-decoration: none;
}

.dropdown {
	position: absolute;
	width: 150px;
	top: 50px;
	opacity: 0;
	visibility: hidden;
	transition: ease-out .35s;
	-moz-transition: ease-out .35s;
	-webkit-transition: ease-out .35s;
}

.mainnav li {
	float: left;
	padding: 5px;
	background: maroon;
	border-left: 1px dotted #fff;
}

.mainnav li:first-child {
	border: none;
}

.mainnav li a {
	display: block;
	padding: 2px 20px;
	color: #fff;
	font-family: arial;
}

.mainnav li:hover {
	background: #fff;
	transition: ease-in .35s;
	-moz-transition: ease-in .35s;
	-webkit-transition: ease-in .35s;
}

.mainnav li:hover a {
	color: maroon;
	transition: ease-in .35s;
	-moz-transition: ease-in .35s;
	-webkit-transition: ease-in .35s;
}

/*First Level*/
.subs {
	left: -45px;
	position: relative;
	top: 0px;
	width: 175px;
	border-left: none !important;
	border-bottom: 1px dotted #fff !important;
}

.subs:last-child {
	border: none !important;
}

.hassubs:hover .dropdown,
.hassubs .hassubs:hover .dropdown {
	opacity: 1;
	visibility: visible;
	transition: ease-in .35s;
	-moz-transition: ease-in .35s;
	-webkit-transition: ease-in .35s;
}

.mainnav li:hover ul a,
.mainnav li:hover ul li ul li a {
	color: white;
}

.mainnav li ul li:hover,
.mainnav li ul li ul li:hover {
	background: #fff;
	transition: ease-in-out .35s;
	-moz-transition: ease-in-out .35s;
	-webkit-transition: ease-in-out .35s;
}

.mainnav li ul li:hover a,
.mainnav li ul li ul li:hover a {
	color: maroon;
	transition: ease-in-out .35s;
	-moz-transition: ease-in-out .35s;
	-webkit-transition: ease-in-out .35s;
}

/*Second Level*/
.hassubs .hassubs .dropdown .subs {
	left: 25px;
	position: relative;
	width: 165px;
	top: 0px;
}

.hassubs .hassubs .dropdown {
	position: absolute;
	width: 150px;
	left: 160px;
	top: 0px;
	opacity: 0;
	visibility: hidden;
	transition: ease-out .35s;
	-moz-transition: ease-out .35s;
	-webkit-transition: ease-out .35s;
}

That’s all! hopefully, you have successfully created a responsive multi-level mega menu. If you have any questions or suggestions, feel free to comment below.