This customizable jQuery plugin offers you the possibility of transforming your menus with ul>li at 1 level of interweaving (ul>li>ul>li>ul>li) in an attractive animated menu.
You will just have to target your menu thanks to the function of the plugin to transform it into a fluid and pleasant to use menu.

Usage

This type of tool is very simple to set up because it is a plugin of the jQuery library.

Load the file of the styles of the plugin. This code for calling the CSS file must be placed before the </head> tag:

<link href="css/juizDropDownMenu.css"
rel="stylesheet" type="text/css"
media="screen, projection" />

These styles are customizable, naturally. or make a link from the Google API .
Place this call of the javascript file just before the </body> tag:

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
</script>

Load the file of the plugin in the same way by placing it after the line of call of the library. Here we imagine that your scripts are in the root of your site, in a directory named "scripts". To you to modify this road if need:

<script type="text/javascript"
src="/scripts/juizDropDownMenu-1.5.min.js"></script>

Call the function by targeting exactly the element which contains your list of links.
Place this code following the previous two lines:

<script type="text/javascript">
        $(document).ready(function() {
                $("#dropdown").juizDropDownMenu();
        });
</script>

read more:http://jq.creativejuiz.fr/plugins-jquery/dropdown-menu.php?lang=en

don't support Internet Explorer