Horizontal Multi Level Menu with Dropdown Based on CSS only

It’s time to build some more creative looking horizontal multi level menu dropdown based with CSS only. We will also build a dropdown menu with the second level of the horizontal navigation bar.

It has a different level of child menus and dropdown. We try to design them nice and easy to navigate.

These multi-level navigation have two levels and a drop-down list for each item. It works well on both mobile and desktop platforms, and you can easily implement into your website. Changing colors and customization is also easy.

The responsive multi-level menu has been the main element factor of most new era websites. It’s a bit difficult to create a proper useful Responsive Navigation Menu because not only it has a perfect look maintain, but it must choose different display screen sizes also.

If you’ve ever done a responsive website design before, You’ve without a doubt had to handle one of the trickiest problems in this appearing field navigation.

For simple navigation, the alternatives can be straight-forward. However, if you want to make some dropdown menu using CSS or want to make an advance mega menu, then you find it’s a bit more complicated than a simple menu.

In this process to make multi-level and drop-down navbar, we will use a strategy that can provide a large list of items using media queries and simple possible markup. Let’s build!

Create HTML for Horizontal Multi Level Menu

The first part of HTML looks a bit simple like we need to define regular nav HTML tag than one main container class name .MultiLevelMenu.

Finally, we do ul li. Here it will look like:

<nav>
    <div class="MultiLevelMenu depth-1">
        <ul class="menu">
            <li class="MultiItem">
                <a class="MultiLink" href="#">Feature</a>
            </li>
            <li class="MultiItem">
                <a class="MultiLink" href="#">Products</a>
            </li>
            <li class="MultiItem">
                <a class="MultiLink" href="#">Store</a>
            </li>
            <li class="MultiItem">
                <a class="MultiLink" href="#">Gallery</a>
            </li>
        </ul>
    </div>
</nav>

Next step it bit complex but let me explain you in an easy way. Let’s say we need to add Multi-Level nav under first menu (Feature), we will just add another div element inside the li unordered list.

To be honest, the HTML isn’t simple like the simple CSS menus or drop-down menus. Here we have a multi-level menu so we have to add some extra divs. This div called depth-2

<nav>
    <div class="MultiLevelMenu depth-1">
        <ul class="menu">
            <li class="MultiItem">
                <a class="MultiLink" href="#">Feature</a>
                /*Multi_level*/
                <div class="MultiLevelMenu depth-2">
                    <ul class="menu">
                        <li class="MultiItem">
                            <a class="MultiLink" href="#">Shopping</a>
                        </li>
                        <li class="MultiItem">
                            <a class="MultiLink" href="#">Classified</a>
                        </li>
                    </ul>
            	</div>
                
            </li>
        </ul>
    </div>
</nav>

The third and final step for adding dropdown menu within Multi Level Menu, we again simply need to add another depth inside the unordered li that you want to have the drop-down menu. Let’s say I want to add under shopping so our code will look like that.

<nav>
    <div class="MultiLevelMenu depth-1">
        <ul class="menu">
            <li class="MultiItem">
                <a class="MultiLink" href="#">Feature</a>
                <div class="MultiLevelMenu depth-2">
                    <ul class="menu">
                        <li class="MultiItem">
                            <a class="MultiLink" href="#">Shopping</a>
                            <div class="MultiLevelMenu depth-3">
                                <ul class="menu">
                                    <li class="MultiItem">
                                    	<a class="MultiLink" href="#">T-Shirts</a>
                                    </li>
                                    <li class="MultiItem">
                                    	<a class="MultiLink" href="#">Smartphone</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="MultiItem">
                            <a class="MultiLink" href="#">Classified</a>
                        </li>
                    </ul>
            	</div>
                
            </li>
        </ul>
    </div>
</nav>

This is what we need to play with CSS when making CSS navigation with the multilevel and drop-down menu. Next, I will show you how the CSS will look like.

 CSS for Menu

Here is some initial CSS but you can find complete CSS file in download source and see the demo for more details.

.MultiLevelMenu {
  width: 100%;
  position: relative;
  color: #000;
}
.menu {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.MultiItem:hover > .MultiLevelMenu {
  display: block;
}
.MultiItem:hover > .MultiLink {
  z-index: 1;
}

.MultiLink {
    color: inherit;
    display: block;
    font-family: "Raleway",sans-serif;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 20px;
    position: relative;
    text-decoration: none;
	color:#000;
}

Let’s customize CSS and make them as you want. I hope you like this only CSS based horizontal multi level menu with dropdown. If you have a question or any feedback please add in below comment section.