Tuesday, July 3, 2012

2 Simple Drop Down Menu using jQuery and CSS

This one is a very simple tutorial to implement Simple Drop Down Menu, with two different ways to trigger them. One of it functions On Mouse Hover and the other one On Mouse Click. I have used simple jQuery and CSS to make this. You can very easily add this to your projects. CSS plays the major role in this script with few lines of jQuery.

Download the Script

We have included both types of the dropdown menu in the script. dropdown1.html is the drop down menu wich functions on Mouse hover and dropdown2.html functions on Mouse Click.
Javascript, for both the types is included in the above mentioned files only, under <script> tag, whereas CSS is in different files.
I hope you all find this Script helpful. We are not explaining the parts of this script here, because it is Ready-to-Use script , but for any query, let us know through your comments.


  1. Hi.. how can we use onclick function menu 2 times in a page? because i need to create 2 different menus in one page.. can you help me please

    1. To add the same dropdown menu twice in a page you need to modify CSS for the dropdown. Differentiate the styling of both dropdowns by using 1 and 2 (giving serial number) with the styled element names.

      Also you must do the same with the javascript declared inside dropdown2.html , copy the same but use different class names and id names.

      This is the simplest way to do it.

  2. Hi,

    I need a menu with more items in the first row and two clicks deep. How could this be done with your script?

    Thanks for answer, Bernd