Dropdown Menu using CSS3 - Part1

All of the different types of menus that can be used on a website, a dropdown menu provides most benefits. A dropdown menu is able to organize all contents into smaller sub-categories that are easy to navigate. By using a dropdown menu with a large list of categories and sub-categories, the surfing experience of your visitors can be improved.
All dropdown menu described below uses two pieces of codes. One is the HTML code, responsible for positioning the menu in the right place of blogger and the second one is the CSS code, responsible for the look and feel of the menu. The reason for prefering CSS or Cascading Style Sheet over javascript or jQuery is CSS is much more easier than Javascript or jQuery, page loading time is less and compatible with all major browsers.
This tutorial is the 1st part of how to add a stylish dropdown menu in blogger. In this part I have discussed how to write these codes in right places in blogger. Obviously this part is for beginners. If you know this part already or if you have read this part already, you can skip to Dropdown Menu using CSS3 - Part2.

Before you make any changes in your blogger template, it is recommended to backup your blog in case something goes wrong.

So, here we go.

❝ Style 1 ❞

❝ Style 2 ❞

❝ Style 3 ❞

❝ Style 4 ❞

❝ Style 5 ❞

✔ Features :

• Very simple CSS code.
• Clear indication of mouse over.
• Easily editable.
• Some of these are multilevel.

All right, let's proceed.

1. Sign in to Blogger.
2. Click the Drop-down arrow adjacent to 'Go to post list' icon and select 'Layout' from the drop-down menu list. This will take you to the layout section of different widgets (or gadgets) of your blog.

3. Click on 'Add a Gadget' link as shown in the fig below. A new window that contains list of all available widgets will open.

4. Scroll down and click on 'HTML/Javascript' gadget or the '+' icon as shown in fig below.

5. Copy and paste the codes of that particular style you like within content box and then hit 'Save' (for various codes scroll down to bottom and click the link).
6. Drag that widget to the top of 'Blog Posts' section as shown in figure below and save arrangement.

7. Click 'Template' and then click 'Edit HTML'. In case of blogger old interface, make sure that 'Expand Widget Template' is checked.

8. Search for (
   Ctrl
   +
   f
   ) /* Tabs and delete everything within that /* Tabs section (as shown in figure below).

9. Hit 'Save'.

Continue to Dropdown Menu using CSS3 - Part2.
I have tried my best to keep things as simple as possible. If you have any questions on this, please let me know. It will be my pleasure.
Enjoy !