Studies show that  navigation’s tend to get the most visual attention when a user first visits a site. That’s why every web designer wants to make the navigation of the website eye catching and user friendly so that user find themselves at the most ease. Drop down menus are a really convenient way to fit a large menu into  really small initial space. It also plays important role in the creation of an effective and user friendly website. In this article i have explore 12 resources for awesome drop down menu for your website i hope you will find them promising.

1.All Levels Navigational Menu:

All Levels Navigational Menu is a CSS/ HTML list based menu with support for infinite levels of sub menus. It’s lightweight and  easy to implement (the menu contents are simply regular HTML lists), with all of the menu links search engine friendly. Furthermore, the menu is structured in a way that makes it very easy to customize its look.

2.Chrome CSS Drop Down Menu:

Chrome Menu is a CSS and JavaScript hybrid drop down menu. It’s easy to configure and search engine friendly. The main menu bar consist of a CSS list, while the drop down menus are simply regular DIV tags on page. Thanks to JavaScript, the menu supports subtle but important effects such as delay before menu disappearance, and repositioning of the menu if too close to any one of the four corners of the window. The entire menu, including images and external files, is extremely compact. Thanks to CSS, the menu can be styled with a different “theme” easily, just by modifying a few CSS attributes and changing a couple of images’ colors.


This is a tutorial showing animated drop down menu creation from strach step by step using css and jQuery.

4.CSS3 Drop down Menu:

It is Mac-like multilevel drop down menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The drop down also works on non-CSS3 compatible browsers such as IE7+, but the rounded corners and shadow will not be rendered.

5.Free CSS Drop-Down Menu Framework:

It’s a framework, released under GNU General Public License. Cross browser compatible, light and easy transformable to mimic a lot of existing drop down menus out there. For example Flickr, Adobe, and

6.Horizontal Subnav with CSS:

This is a tutorial which will go over how to create a simple navigation with a horizontal subnav. In most cases we can achieve this effect purely with CSS, but since we have to attend to our red headed step child aka IE6, we will use a few lines of jQuery to cover all grounds.

7.jQuery Menu:

Menu system, which can be used to create a simple drop down menu for a single list of options, a fly out menu for a smaller hierarchical list of options.

8.Mega Drop Down Menu:

According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites.This tutorial experiment with different ways of implementing this technique which leads to mega drop down menu system like in the figure shown.


MenuMatic is a MooTools 1.2 class that takes a semantic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without java script, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Drop downs by Patrick Griffiths and Dan Webb.

10.MooTool Drop down menu:

Easy, unobtrusive way to create a drop down menu with Mootools 1.2. Compatible with all of today’s popular browsers, including web kit browsers such as: Google Chrome and Safari. Also this has been tested with MooTools 1.2 users of 1.1 Upgrade your depreciated unsupported scripts.

11.Sexy Drop Down Menu w/ jQuery & CSS:

In this tutorial they to go over how to create a sexy drop down menu that can also degrade gracefully.


Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript).