PUBLISHED: NOVEMBER 28, 2014 – ARTICLE: HOW TO MAKE MULTI LEVEL DROP DOWN MENU IN CSS

How To Make Multi Level Drop Down Menu in CSS. If you have been looking for a vertical menu that is multi level you found the right place. Its very easy to create a multi level drop down menu in CSS. Copy our drop down menu code to your site and edit the HTML code. This horizontal menu is super fast loading as text colours and background colours are done from the CSS code. You have full control and don’t need a menu maker.

About The Multi Level Vertical Menu

 
Try the demo of the menu on the left. When you hover over the main menu a sub menu will pop out, you do not have to have a sub menu on each main menu. The vertical menu can be easily customized, change the menu text, border and background colours and lots more from the drop down menu CSS code giving you full control of the look. There is a javascript that is used by the multi level vertical menu for the sub menu part of the menu.

Step1: To make multi level drop down menu in CSS on your site copy the dropdown menu code from below and paste onto your site.

Step2: Update your site and the multi level drop down menu will be on your site. You can now start to change the appearance of the menu to your colour scheme using the menu CSS code, see below how to change colours, text size, menu width and lots more in the menu CSS tutorial.

Step3: Change the anchor text and links in the multi level drop down menu to what applies to your site. See tutorials below on how to change the multi level drop down menu HTML code.

Help with your menu colours

If you need to match colours on your site for your vertical menu then use the instant eyedropper. It can select any colour from your screen and copies the hex colour code to the clip board for you to paste in your menu CSS code.

Or use our hex colour code chart to select web safe colours for your menu colours.

Multi Level Drop Down Menu Code

This is the full vertical menu code that you will copy and paste to your site below.
The menu CSS is first this is to control menu colours, text size, width etc.

Next is the JavaScript this is for the multi level part of the menu. (when you hover over the menu and a second menu pops out)

And last is the HTML part of the menu. Change menu titles and links in this part.

Some other navigation menus: vertical menu and horizontal drop down menu

We also recommend visiting www.dynamicdrive.com for more on multiple level menus

<style type="text/css">
.createawebsitediv ul{/* Vertical menu */ 
} 
.createawebsitediv ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 11px Arial,Lucida Grande, Lucida Sans Unicode;
width: 160px; /* Width of Menu Items */
border-bottom: 0px solid #ccc;
}
.createawebsitediv ul li{
position: relative;
}
/*Sub level menu items */
.createawebsitediv ul li ul{
position: absolute;
width: 160px; /*sub menu width*/
top: 0;
visibility: hidden;
}
/* Sub level menu links style */
.createawebsitediv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: #800000;
text-decoration: none;
background: #F2E2BD;
padding: 3px;
border: 0px solid #C00000;   
border-bottom: 1px solid #FFFFFF;
}
.createawebsitediv ul li a:visited{
color: #800000
}
.createawebsitediv ul li a:hover{
background-color: #C00000;
}
.createawebsitediv ul li a:hover{
color: #FFFFFF;
font: normal 13px Arial,Lucida Grande, Lucida Sans Unicode;
}
.createawebsitediv .subfolderstyle{
background: #F2E2BD;
}
/* Holly Hack for IE \*/
* html .createawebsitediv ul li { float: left; height: 1%; }
* html .createawebsitediv ul li a { height: 1%; }
</style>

<script type="text/javascript" src="http://www.linkbuildingservices4sites.com/resources/multi-level-menu-html.js"></script> 
 
<div class="createawebsitediv"> 
<ul id="createawebsite1"> 
<li><a href="http://www.yourlinkhere.com/">HOME</a>
<ul>
<li><a href="http://www.yourlinkhere.com/">MULTI LEVEL DROP DOWN MENU</a></li>
<li><a href="http://www.yourlinkhere.com/">GREEN GEEKS HOSTING</a></li>
</ul>
<li><a href="http://www.yourlinkhere.com/">MAKE A WORDPRESS WEBSITE</a>
<ul>
<li><a href="http://www.yourlinkhere.com/">BUILD QUALITY LINKS</a></li>
</ul>
<li><a href="http://www.yourlinkhere.com/">CHECK FOR BROKEN LINKS ON WEBSITE</a>
<ul>
<li><a href="http://www.yourlinkhere.com/">WEBSITE ANALYSIS</a></li>
</ul>
</ul></div>

If you found how to make multi level drop down menu in CSS helpful please share thanks

You may also like this.

Single-level dropdowns