A Simple Drop-Down Menu Using Jquery

The last two drop down menu tutorials on this blog use background images in the menu-tabs, and hence it is not so easy to customize them for your blogs. So here's a new widget code, in which you can easily change the colors of the menu so as to match with your blog.

Live demo can be seen here: 
Demo1: ClubVista Blogger Template (In Green)
Demo2: JavaScript-Array (In Blue) (Widget author's blog)

To add a widget similar to these, follow these steps:

STEP1:
Log in to Blogger, go to "Layout" -> "Edit HTML"

STEP2:
Now find this code:

and immediately BEFORE/ABOVE it, paste this code:

Now before you save the template, make these changes in the code :

To get the HTML color codes, you can refer to this image:
http://homepages.ulb.ac.be/~dgonze/INFO/htmlcolors.png
STEP3:
and go to "Layout" -> "Page Elements"
and click on "Add a Gadget", select it as "HTML/JavaScript" type

and finally paste this code in to the new widget:

• JavaScript
  
  
  
  • Drop Down Menu
  
  
  • jQuery Plugin
  
  
  • Ajax Navigation


• Effect
  
  
  
  • Slide Effect
  
  
  • Fade Effect
  
  
  • Opacity Mode
  
  
  • Drop Shadow
  
  
  • Semitransparent


• Navigation


• HTML/CSS


• Blogger Help

And save the widget.