New Multi-Level Drop-Down Menu

Drop down menu makes the navigation in your blog a lot easier, as you can put a number of links in a single row or column.

See this widget in action: ClubVista Template

Similar Widgets:

1. Multi Level Drop Down Menu - Black


2. Sliding Drop Down Menu



To use this drop down menu on your blog, follow these instructions:



STEP #1:

Log in to Blogger, go to Layout and click on "Edit HTML"




Find (CTRL+F) this code in the template:


</head>
and immediately ABOVE / BEFORE that, paste this code:


<!--MULTI-LEVEL-DD-MENU-STARTS-->


<link rel="stylesheet" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/style.css" type="text/css" />


<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/script.js"></script>




<!--MULTI-LEVEL-DD-MENU-http://bloggerstop.net-->


STEP #2:

Now go to "Layout" -> "Edit HTML" -> "Page Elements" and click on "Add a Gadget" and select it as "HTML/JavaScript" type.




And add this code to it:


<!--MULTI-LEVEL-DD-MENU-STARTS-->


<ul class="menunew" id="menu">


<li><a href="#" class="menulink">Dropdown One</a>


<ul>


<li><a href="#">Navigation Item 1</a></li>




<li>


<a href="#" class="sub">Navigation Item 2</a>


<ul>


<li class="topline"><a href="#">Navigation Item 1</a></li>


<li><a href="#">Navigation Item 2</a></li>




<li><a href="#">Navigation Item 3</a></li>


<li><a href="#">Navigation Item 4</a></li>


<li><a href="#">Navigation Item 5</a></li>




</ul>


</li>


<li>


<a href="#" class="sub">Navigation Item 3</a>


<ul>


<li class="topline"><a href="#">Navigation Item 1</a></li>




<li><a href="#">Navigation Item 2</a></li>


<li>


<a href="#" class="sub">Navigation Item 3</a>


<ul>


<li class="topline"><a href="#">Navigation Item 1</a></li>




<li><a href="#">Navigation Item 2</a></li>


<li><a href="#">Navigation Item 3</a></li>


<li><a href="#">Navigation Item 4</a></li>




<li><a href="#">Navigation Item 5</a></li>


<li><a href="#">Navigation Item 6</a></li>


</ul>


</li>


<li><a href="#">Navigation Item 4</a></li>




</ul>


</li>


<li><a href="#">Navigation Item 4</a></li>


<li><a href="#">Navigation Item 5</a></li>


</ul>




</li>


<li><a href="http://bloggerstop.net" class="menulink">Blogger Help</a></li>


<li>


<a href="#" class="menulink">Dropdown Two</a>


<ul>


<li><a href="#">Navigation Item 1</a></li>




<li>


<a href="#" class="sub">Navigation Item 2</a>


<ul>


<li class="topline"><a href="#">Navigation Item 1</a></li>


<li><a href="#">Navigation Item 2</a></li>




<li><a href="#">Navigation Item 3</a></li>


</ul>


</li>


</ul>


</li>


<li>


<a href="#" class="menulink">Dropdown Three</a>




<ul>


<li><a href="#">Navigation Item 1</a></li>


<li><a href="#">Navigation Item 2</a></li>


<li><a href="#">Navigation Item 3</a></li>




<li><a href="#">Navigation Item 4</a></li>


<li><a href="#">Navigation Item 5</a></li>


<li>


<a href="#" class="sub">Navigation Item 6</a>




<ul>


<li class="topline"><a href="#">Navigation Item 1</a></li>


<li><a href="#">Navigation Item 2</a></li>


</ul>


</li>




<li><a href="#">Navigation Item 7</a></li>


<li><a href="#">Navigation Item 8</a></li>


<li><a href="#">Navigation Item 9</a></li>




<li><a href="#">Navigation Item 10</a></li>


</ul>


</li>


</ul>


<script type="text/javascript">


var menu=new menu.dd("menu");


menu.init("menu","menuhover");




</script>


<!--MULTI-LEVEL-DD-MENU-http://bloggerstop.net-->
Of course you have to edit the content before saving this widget.