Add Multi Level Dropdown Menu

Previously, I've posted about How to add horizontal menu for blogger. Now, I will posted about add multi level dropdown menu. Maybe, you never hear this trick. Actually, this trick just the extension of normal horizontal menu. So, in this menu you can add more links. OK, if you want to add into your blog, just follow the steps below.




View the Demo

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Then, copy the code below, and paste above </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />




<!--[if lte IE 7]>

<style type="text/css">

html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/

</style>

<![endif]-->




<script type="text/javascript" src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js"></script>

4. After that copy the code below, and paste above ]]></b:skin>

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

5. And copy the code below, and paste above <div id='header-wrapper'>

<div id="myslidemenu" class="jqueryslidemenu">

<ul>

<li><a rel="nofollow" href="http://tipsandtricksfor.blogspot.com/">Home</a></li>

<li><a rel="nofollow" href="#">Item 2</a></li>

<li><a rel="nofollow" href="#">Folder 1</a>

<ul>

<li><a rel="nofollow" href="#">Sub Item 1.1</a></li>

<li><a rel="nofollow" href="#">Sub Item 1.2</a></li>

<li><a rel="nofollow" href="#">Sub Item 1.3</a></li>

<li><a rel="nofollow" href="#">Sub Item 1.4</a></li>

</ul>

</li>

<li><a rel="nofollow" href="#">Item 3</a></li>

<li><a rel="nofollow" href="#">Folder 2</a>

<ul>

<li><a rel="nofollow" href="#">Sub Item 2.1</a></li>

<li><a rel="nofollow" href="#">Folder 2.1</a>

<ul>

<li><a rel="nofollow" href="#">Sub Item 2.1.1</a></li>

<li><a rel="nofollow" href="#">Sub Item 2.1.2</a></li>

<li><a rel="nofollow" href="#">Folder 3.1.1</a>

<ul>

<li><a rel="nofollow" href="#">Sub Item 3.1.1.1</a></li>

<li><a rel="nofollow" href="#">Sub Item 3.1.1.2</a></li>

<li><a rel="nofollow" href="#">Sub Item 3.1.1.3</a></li>

<li><a rel="nofollow" href="#">Sub Item 3.1.1.4</a></li>

<li><a rel="nofollow" href="#">Sub Item 3.1.1.5</a></li>

</ul>

</li>

<li><a rel="nofollow" href="#">Sub Item 2.1.4</a></li>

</ul>

</li>

</ul>

</li>

<li><a rel="nofollow" href="http://tipsandtricksfor.blogspot.com/">Item 4</a></li>

</ul>

<br style="clear: left" />

</div>

Customize first!

6. Just click Save Template