Drop Down Menu

Multi Level Drop Down Menu. Looking for a Multi Level Drop Down Menu for your site, use our html dropdown menu code on your site to make your drop down menu. The drop down menu is very light and does not use images, the menu text, border and background colours can be changed from the CSS Code giving you full control of the look. There is a java script that is used by the multi level drop down menu for the sub menu part of the menu.

How To Make a Multi Level Drop Down Menu

Placing the drop down menu on your site is quick and easy, copy the html dropdown menu code from below and paste it onto your site, update and the menu will be there. Now change the menu titles, links, text size, text colour and background colour on the CSS Code to your style. Below is what the drop down menu looks like. Hover over the menu and the colour changes and a sub menu will appear.

DEMO: Multi Level Drop Down Menu

Multi Level Drop Down Menu Code

<style type="text/css">
 #_ (<a href="http://www.2createawebsites.com/">
  Create a Website</a>)}
</style><style type="text/css">
 /*URL: http://www.2createawebsites.com/ */
.createawebsitediv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #C00000;
}
.createawebsitediv ul li{
position: relative;
}
/*Sub level menu items */
.createawebsitediv ul li ul{
position: absolute;
width: 180px; /*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: #333399;
text-decoration: none;
background: #F9F9FF;
padding: 1px 5px;
border: 1px solid #C00000;   
border-bottom: 0;
}
.createawebsitediv ul li a:visited{
color: #333399;
}
.createawebsitediv ul li a:hover{
background-color: #333399;
}
.createawebsitediv ul li a:hover{
color: #FFFFFF;
}
.createawebsitediv .subfolderstyle{
background: #F9F9FF;
}
/* Holly Hack for IE \*/
* html .createawebsitediv ul li { float: left; height: 1%; }
* html .createawebsitediv ul li a { height: 1%; }
/* End */
</style>
<p style="display:none;"><a href="http://www.2createawebsites.com/">How To a Build Website</a></p>
<script type="text/javascript" src="http://www.2createawebsites.com/resources/multi-level-menu-html.js"></script> 
  

  <div class="createawebsitediv">
  <ul id="createawebsite1">
   <li><a href="http://www.2createawebsites.com/">How To Make a Website</a>
   <ul>
   <li><a href="http://www.2createawebsites.com/how-2-make-a-website-multi-level-vertical-menu.php">Drop Down Menu</a></li>
   <li><a href="http://www.2createawebsites.com/how-2-make-a-website-multi-level-vertical-menu.php">HTML Dropdown Menu</a></li>
   </ul>
<li><a href="http://www.2createawebsites.com">Free Website</a>
   <ul>
   <li><a href="http://www.2createawebsites.com/html-editor.php">HTML Editor</a></li>
   </ul>   
<li><a href="http://www.2createawebsites.com">Create Web Site</a>
   <ul>
   <li><a href="http://www.2createawebsites.com">Creating a Website</a></li>
  </ul>
 </div>

multi level vertical menu

STOP! READ THIS! Want to make a website and don't know where to start click here