You are free to use this script for commercial and non-commercial projects. I would love to hear from you if you use it or have input.
Features
Clean, minimalist design, ready to be styled. Ease of use and styling are the goals. This should be a great starting point if you are looking to create a similar menu.
Handles submenu items appearing outside the viewport/window
For mobile/touch devices, ensures an item's submenu is showing before allowing its link to be opened
Option for either horizontal or vertical menu
Supports variable-width menu items. Vertical menus must have a width defined at the root, but submenus are still variable.
Independent timers on open/close of submenus to reduce accidental menu operations
Option to automatically add arrows indicating submenus
Option to automatically apply a CSS3 drop shadow class to submenus
Customizable submenu display animation using jQuery's animate() effects
Functioning in tests with Chrome, Firefox, Safari, IE >= 7, Android WebKit, and Android Firefox
Usage
Include the jQuery library, dropdown-menu.min.js and dropdown-menu.css on the page:
<link rel="stylesheet" href="dropdown-menu.css" />
<script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="dropdown-menu.min.js"></script>
<script type="text/javascript">
$(function() {
$('#example2').dropdown_menu({
sub_indicator_class : 'dropdown-menu-sub-indicator', // Class given to LI's with submenus
vertical_class : 'dropdown-menu-vertical', // Class for a vertical menu
shadow_class : 'dropdown-menu-shadow', // Class for drop shadow on submenus
hover_class : 'dropdown-menu-hover', // Class applied to hovered LI's
open_delay : 150, // Delay on menu open
close_delay : 300, // Delay on menu close
animation_open : { opacity : 'show' }, // Animation for menu open
speed_open : 'fast', // Animation speed for menu open
animation_close : { opacity : 'hide' }, // Animation for menu close
speed_close : 'fast', // Animation speed for menu close
sub_indicators : false, // Whether to show arrows for submenus
drop_shadows : false, // Whether to apply drop shadow class to submenus
vertical : false, // Whether the root menu is vertically aligned
viewport_overflow : 'auto', // Handle submenu opening offscreen: "auto", "move", "scroll", or false
init : function() {} // Callback function applied on init
});
});
</script>
<ul id="example2" class="dropdown-menu">
<li><a href="#">Item 1</a></li>
<li>
<a href="#">Item 2</a>
<ul>
<li>
<a href="#">Submenu Item</a>
<ul>
<li><a href="#">Submenu Item 1</a></li>
<li><a href="#">Submenu Item 2</a></li>
</ul>
</li>
</ul>
</li>
</ul>