I was able to add a nice multilevel dropdown menu to my blog. In this post I’m going to discuss how you also can add it to your blogger blog. Here I’m using pure CSS multilevel menu generated by Free CSS Drop Down Menu Generator.
You can’t use the code directly in blogger without some modifications; I’ll describe how you can edit the code to use it in blogger to get a menu bar like above picture (Figure 1).
Create the Menu
First get the following code and save it as .html file. Then edit the styles and links as you want. If you like this style, you only need add links for menus and sub menus.Note : If you use the above mentioned Menu Generator in the HTML code you must replace "<![if gt IE 6]></a><![endif]>" using "<!--[if gt IE 6]><!--></a><!--<![endif]-->", otherwise it will not work in the Blogger.
View Code
Add Menu to Blog
1. Now you have to edit the HTML in your blogger template. To do that first go to "Edit HTML" (Figure 2). (Before editing your template, download the full template)
Find "b:section class='header'" and set the value of "maxwidgets" to 3, if it is less than it (Figure 2). Set "showaddelement" to "true",
2. Then Find the </head> tag in your template and paste the styles just before that tag. Make sure you should include <style type="text/css"> and </style> tags.
3. Now you can add new "HTML/JavaScript" Gadget to your blogger header and paste the code between <body> and </body> from the .html file you created using my code given in the top of this post (Figure 3). There do not give a Title for the Gadget.
Now every thing is ok and view your blog to see the new Gadget.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> ul.cssMenu ul{display:none} ul.cssMenu li:hover>ul{display:block} ul.cssMenu ul{position: absolute;left:-1px;top:98%;} ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;} ul.cssMenu,ul.cssMenu ul{ margin:0px; list-style:none; padding:0px 2px 2px 0px; background-color:#d8d8d8;} ul.cssMenu table {border-collapse:collapse}ul.cssMenu { display:block; zoom:1; float: left;} ul.cssMenu ul{ border-left:2px solid #444444; border-bottom:1px solid #444444; border-right:1px solid #444444; border-top:0px; z-index:9999;} ul.cssMenu li{ display:block; margin:2px 0px 0px 2px; font-size:0px;} ul.cssMenu a:active, ul.cssMenu a:focus {outline-style:none;} ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover { display:block; vertical-align:middle; background-color:#d8d8d8; text-align:left; text-decoration:none; padding:4px; _padding-left:0; font:normal 11px Verdana; color: #444444; text-decoration:none; cursor:default;} ul.cssMenu span{ overflow:hidden; font-weight:bold; background-position:right center; background-repeat: no-repeat; padding-right:11px;} ul.cssMenu li { float:left;} ul.cssMenu ul li {float:none;} ul.cssMenu ul a { text-align:left; white-space:nowrap;} ul.cssMenu li.sep{ text-align:center; padding:0px; line-height:0; height:100%;} ul.cssMenu li.sep span{ float:none; padding-right:0; width:5; height:16; display:inline-block; background-color:#AAAAAA; background-image:none;} ul.cssMenu ul li.sep span{width:80%;height:3;} ul.cssMenu li:hover{position:relative;} ul.cssMenu li:hover>a{ background-color:#eeeeee; font:normal 11px Verdana; color: #000000; text-decoration:none;} ul.cssMenu li a:hover{ position:relative; background-color:#eeeeee; font:normal 11px Verdana; color: #000000; text-decoration:none;} ul.cssMenu li.dis a {color: #AAAAAA !important;} ul.cssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;height:16px;} ul.cssMenu a:hover ul,ul.cssMenu a:hover a:hover ul,ul.cssMenu a:hover a:hover a:hover ul{display:block} ul.cssMenu a:hover ul ul,ul.cssMenu a:hover a:hover ul ul{display:none} </style> </head> <body> <ul class="cssMenu"> <li><a href="#" title="test title"><span>SEO</span><!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#" title="test title">Your Site in Google</a></li> <li><a href="#" title="test title">Selecting Good Title</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li><a href="#" title="test title"><span>Blogger Tips</span><!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="cssMenum"> <li><a href="#" title="test title">Expandable Blogger Posts</a></li> <li><a href="#" title="test title">Blogger Title Tip</a></li> <li><a href="#" title="test title">Adding META Tags</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li><a href="#" title="test title"><span>SharePoint</span><!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="cssMenum"> <li><a href="#" title="test title">What is SharePoint</a></li> <li><a href="#" title="test title"><span>Create Custom Features</span><!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="cssMenum"> <li><a href="#" title="test title">Removing Features</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li><a href="#" title="test title">CAML in SharePoint</a></li> <li><a href="#" title="test title">User Groups</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> </ul> </body> </html>