Create a vertical accordian menu for blogger

Tweet

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 the one in my home page.
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 >





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
   

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 ..