Create Vertical Accordion Menu

If you want to add a navigation menu, with hovering effect and drop down menu capability in blogger blog to give it a more website like feel, this is how you do it.
 The menu we are going to add looks like.
Now ,as with any customisation this too has two parts

1. A CSS edit and
2. The real code 

The CSS code ;  To define the appearance we have to add the following code to the style sheet , just before the style sheet declaration ends. Search for "]]" in the browser.Now copy the following code preceding the red line and paste it before the ]] < /b:skin >

/* verticalaccordion

------------------------------------------------*/

.verticalaccordion>ul {

margin: 0;

padding: 0;

list-style:none;

width: 580px;

}

.verticalaccordion>ul>li {

display:block;

overflow: hidden;

margin: 0;

padding: 0;

list-style:none;

height:40px;

width: 580px;

/*

Now Save the template.

2. Adding the code.
                              You may add the code as widget or as HTML in the code editor window. I would recommend the widget since it will be easier to maintain in the long run. Do the following steps

1. Add the HTML widget in blogger
2. Copy the following piece of code on it and add whatever content you want in the blue regions provided.The code is self explanatory and simple I think. You may remove the comments if you don't want them
   

<div class="verticalaccordion">

<ul>

<li>

 <h3>Header 1</h3>

 <div>

  <a href="link you want to put">Home</a><br/>

  <a href="link you want to put">Home</a><br/>

 </div>

</li>

<li>

 <h3>Header 2</h3>

 <div>

  <a href="link you want to put">Home</a><br/>

  <a href="link you want to put">Home</a><br/>

 </div>

</li>

<li>

 <h3>Header 3</h3>

 <div>

  <a href="link you want to put">Home</a><br/>

  The text ,if any ,you want to put

 </div>

</li>

<li>

 <h3>Header 3</h3>

 <div>

  <a href="link you want to put">Home</a><br/>

  <a href="link you want to put">Home</a><br/>

 </div>

</li>

/*--.add as many tabs as you want , just by repeating the above code block from <li>to </li>

------------------------------------------------*/

</ul>

</div>

Now you save the widget and save the template. Your new web template with drop down menu is ready !!

If you find any bugs in this do let me know. I have tested it in my own website and it looks perfectly OK ..

Original tutorial here