Multi Level Drop Down Menu For Blogger & Wordpress

[a href="http://zailab.blogspot.com/#" rel="nofollow" target="_blank"]Live Demo[/a]

Add This Drop Down Menu To Blogger

Go To Blogger > Design
Choose HTML/Javascript Widget. We will add the menu just below Header so choose the widget near the Head section of your layout
Paste the following code inside it,

<script src='http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' type='text/javascript'></script>
<style>
/* ######### Drop Down Menu by www.MyBloggerTricks.com ######### */

.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}

.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}

.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: black;
background-color: lightyellow;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}

* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover{
background-color: black;
color: white;
}

.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}

.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}

.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}

/* ######### Black Strip Main Menu Bar CSS ######### */

.mattblackmenu ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background: #414141;
overflow: hidden;
width: 100%;
}

.mattblackmenu li{
display: inline;
margin: 0;
}

.mattblackmenu li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141;
}

.mattblackmenu li a:visited{
color: white;
}

.mattblackmenu li a:hover{
background: black; /*background of tabs for hover state */
}

.mattblackmenu a.selected{
background: black; /*background of tab with "selected" class assigned to its LI */
}

</style>

<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="#">LINK1</a></li>
<li><a href="#" rel="ddsubmenu1">LINK2</a></li>
<li><a href="#" rel="ddsubmenu2">LINK3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#" rel="ddsubmenu3">LINK5</a></li>
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>

<ul class='ddsubmenustyle' id='ddsubmenu1'>
<li><a href='#'>LINK2 ITEM 1</a></li>
<li><a href='#'>LINK2 ITEM 2</a>
<ul>
<li><a href='#'>LINK2 ITEM 2.1</a></li>
<li><a href='#'>LINK2 ITEM 2.2</a></li>
</ul>

</li>
<li><a href='#'>LINK2 ITEM 3</a>
<ul>
<li><a href='#'>LINK2 ITEM 3.1</a></li>

    </ul>

</li>

<li><a href='#'>LINK2 ITEM 4</a></li>

</ul>

<ul class='ddsubmenustyle' id='ddsubmenu2'>
<li><a href='#'>LINK3 ITEM 1</a></li>
<li><a href='#'>LINK3 ITEM 2</a></li>
<li><a href='#'>LINK3 ITEM 3</a>
<ul>
<li><a href='#'>LINK3 ITEM 3.1</a></li>

<li><a href='#'>LINK3 ITEM 3.2</a></li>
<li><a href='#'>LINK3 ITEM 3.3</a></li>
<li><a href='#'>LINK3 ITEM 3.4</a></li>
</ul>
</li>
<li><a href='#'>LINK3 ITEM 4</a></li>
<li><a href='#'>LINK3 ITEM 5</a>
<ul>

<li><a href='#'>LINK3 ITEM 5.1</a></li>
<li><a href='#'>LINK3 ITEM 5.2</a>
    <ul>
    <li><a href='#'>LINK3 ITEM 5.2 1</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 2</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 3</a></li>

    </ul>
</li>
    </ul>
</li>
<li><a href='#'>LINK3 ITEM 6</a></li>
</ul>

<ul class='ddsubmenustyle' id='ddsubmenu3'>
<li><a href='#'>LINK5 ITEM 1</a></li>
<li><a href='#'>LINK5 ITEM 2</a></li>

<li><a href='#'>LINK5 ITEM 3</a></li>
<li><a href='#'>LINK5 ITEM 4</a></li>
<li><a href='#'>LINK5 ITEM 5</a></li>
</ul>

All you need to understand is:

Replace the # symbols with page links
Replace the bolded black texts with Page Titles
To create a drop down menu inside a Main Menu link simple add to it a rel attribute like rel="ddsubmenu1Change the drop down number accordingly.
Normal li and ul rules apply here to create sub menu and sub sub menu links.
Main links are mentioned first and drop down menu links are mentioned separately after the JavaScript call function.
To change the background color of the menu simply edit background: #414141;

4. Save your widget and you are all done!

Visit your blogs to see the menu working just perfectly. I know creating HTML tags for sub links would be a little tricky for those who are not well versed with HTML. But if you mention how you want your links to appear in the comment box below then we will create a code for you as a favour. :)

Want something different?

See Full collection of most of our released Navigation menus here:

[a href="http://www.mybloggertricks.com/2011/11/61-hot-drop-down-menus-for-blogger.html" target="_blank"]71+ Hot Menus For blogger![/a]

Need help?

The menu can easily be customize and font family and colors are easy to be changed. I have not explained every bit of customization for the sake of simplicity. However if you wish to make some big changes to how the menu appears then feel free to post your questions below. I hope you find this menu useful which is surely eye catching and different in every regard. Peace and blessings pals! :)

Source: http://www.mybloggertricks.com/2012/03/multi-level-drop-down-menu-for-blogger.html

Blogger Tips For Beginners