How to articles & tutorials: How to create a drop down menu for your Blogger Blog

Easy navigation is the heart of any website. Drop down submenus below your main horizontal navigation menus would save your blog’s space and allow visitors to easily navigate your blog. Here are simple steps helping achieve this task by using CSS and javascript.

Step 1: Sign in to your blog
Visit Google Blogspot home page at: http://blogspot.com/ or http://www.blogger.com/ and sign in with your Google account.

Step 2: Go to your blog Template Designer

When you sign in to your blog, you are presented with the main dashboard. You can then click 'Design' link under your chosen blog title and click 'Template Designer'.

Step 3: Add Custom CSS to your blog
In your 'Blogger Template Designer' choose 'Advanced' tab -> 'Add CSS'.

Download, copy, and paste this CSS code to 'Add Custom CSS' tab. Click "Apply to Blog" button to add your custom CSS.

Step 4: Add javascript to your blog template

Back to your blog
Click 'Design' -> 'Edit HMTL'
Download, copy, and paste this javascript code under <head> tag in your blog template. Click 'Save Template' button to add your custom javascript code.

Step 5: Add An advanced Horizontal menu with drop down links to your blog

Choose Design / Page Elements / Add a Gadget.
In basic category, choose HTML-Javascript gadget.
Paste the following HTML/Javascript code to the content.

<div id='horizontal_menu'>
<ul>
<li><a href=" ">Menu Item 1</a></li>
<li><a href=" ">Menu Item 2</a></li>

<ul>
<li> <a href=" ">Drop down menu item 1</a> </li>
<li> <a href=" ">Drop down menu item 2</a> </li>
</ul>
</ul>
</div>
<script>

$("#horizontal_menu > ul > li").hover(
horizontal_menu_open,
horizontal_menu_timer
);
</script>