Multi drop down menu of blogers

1. Go To Blogger > Design
2. Click Add a Gadget or Add a Page element
3. Choose HTML/JavaScript widget

4. Simple Paste the Navigation Menu Code inside HTML/JavaScript widget
5. Hit Save
6. Drag HTML/JavaScript widget and drop it just under your Blog Header

Then pest following html code

<div class="menu">

< ul>

< li><a href="#" >Home</a></li>

< li><a href="#" id="current">Products</a>

< ul>

< li><a href="#">Drop Down CSS Menus</a></li>

< li><a href="#">Horizontal CSS Menus</a></li>

< li><a href="#">Vertical CSS Menus</a></li>

< li><a href="#">Dreamweaver Menus</a></li>

< /ul>

< /li>

< li><a href="/faq.php">FAQ</a>

< ul>

< li><a href="#">Drop Down CSS Menus</a></li>

< li><a href="#">Horizontal CSS Menus</a></li>

< li><a href="#">Vertical CSS Menus</a></li>

< li><a href="#">Dreamweaver Menus</a></li>

< /ul>

< /li>

< li><a href="/contact/contact.php">Contact</a></li>

< /ul>

< /div>

 
Then add css code to the tamplete
Log in to Blogger, go to Design -> Edit HTML and mark the tick box "Expand Widget Templates
- Find this type of code ]]></b:skin> and just before paste this CSS Code:

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:#333333;

height:35px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px;

}

.menu li a{

background:#333333 url("http://kishorkc.blogspot.com/_jM8-wHc3NKY/TQsZSeQYKQI/AAAAAAAAAGU/0AgHYW2zktQ/s1600/seperator.gif") bottom right no-repeat;

color:#cccccc;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: #2580a2 url("http://kishorkc.blogspot.com/_jM8-wHc3NKY/TQsZNT36uyI/AAAAAAAAAGM/F8t08m7-5tw/s1600/hover.gif") bottom center no-repeat;

color:#FFFFFF;

text-decoration:none;

}

.menu li ul{

background:#333333;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;



}

.menu li li {

background:url('http://kishorkc.blogspot.com/_jM8-wHc3NKY/TQsZUcZYwkI/AAAAAAAAAGY/zNSlkfCsai8/s1600/sub_sep.gif') bottom left no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;



}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:#2580a2 url('http://kishorkc.blogspot.com/_jM8-wHc3NKY/TQsZPiSwCMI/AAAAAAAAAGQ/VBSL8auDxzc/s1600/hover_sub.gif') center left no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

.menu p{

clear:left;

}

This is final step. now save see preview