Create multilevel Drop down Menu in HTML with CSS3

By : PHPErrorCode August 11, 2017 514 Views html,css

In any website, Navigation bar should look neat and well nested. For that we create Drop down list, so that navigation bar loloks neat and clean. So, Today I am going to create Multi-level Drop down menu list in Navigation bar with the help of HTML and CSS. This post will help for those who are new in HTML and it also helps for to quickly create Drop down menu.

First of all, create any HTML file and write necessary tags that HTML file needed. I will use CSS code in external file. You can also use Internal CSS stylesheet. All you have to do is to place CSS code in <style> element in <head> area

Create menu.html file and paste bellow code in that file

<!DOCTYPE html>
<html>
    <head>
	<title>Drop-down list</title>
	<link rel="stylesheet" type="text/css" href="style/custom.css">
	<style>
	</style>
    </head>
    <body>
	<ul>
	    <li><a href="#">Home</a></li>
	    <li><a href="#">Products</a>
	        <ul>
	            <li><a href="#">Beauty</a></li>
		    <li><a href="#">Books</a></li>
		    <li><a href="#">Electronics</a>
		        <ul>
			    <li><a href="#">Camera</a></li>
			    <li><a href="#">Computers</a></li>
			    <li><a href="#">Mobiles</a></li>
			    <li><a href="#">Refrigerator</a></li>
			    <li><a href="#">Television</a></li>
			</ul>
                    </li>
		    <li><a href="#">Furniture</a></li>
		    <li><a href="#">Sports</a></li>
		</ul>
            </li>
	    <li><a href="#">Services</a></li>
	    <li><a href="#">About Us</a></li>
	    <li><a href="#">Contact Us</a></li>
	</ul>
    </body>
</html>

Our HTML work has been completed. Now, save this file and open in Web Browser. You will see nested Vertical menu list like this.

multilevel drop down menu

Create another file with .css extension and put bellow code in that file.Note that CSS file path has added in href="" attribute in <link> element in HTML file as seen in above code.

* { margin: 0px; padding:0px;}
ul { list-style-type: none; }
ul li { background-color: #632525; width: 125px; height: 25px; float: left; position: relative;}
ul li a { color : #cceca2; text-decoration: none; display: block; text-align: center; }
ul li:hover { background-color: #996767;}
ul li:hover > ul { display: block; }
ul ul { display: none;}
ul ul ul{ left: 100%; top: 0px; position: absolute;}

Explanation:

* { margin: 0px; padding:0px;}

This will start all content with no margin and no padding.

ul { list-style-type: none; }

This will remove bullet and square from list and make it plain.

ul li { background-color: #632525; width: 125px; height: 25px; float: left; position: relative;}

This file will give style like background-color, size, text-align and float to Navigation Bar.

ul li a { color : #cceca2; text-decoration: none; display: block; text-align: center; }

It will give color to text, remove underline, text-align. display:block make whole tab as link rather than only text.

ul li:hover { background-color: #996767;}

It will give background-color effect when mouse hover over menu.

ul li:hover > ul { display: block; }

It will display sub-menu in block when mouse hover over related menu.

ul ul { display: none;}

It will hide sub-menu in normal mode.

ul ul ul{ left: 100%; top: 0px; position: absolute;}

It will make third level menu to open right side of its menu. Hope you like this post. If you need any assistant or want to suggest, please write to comment.