Superfish v1.7.4 – jQuery menu plugin by Joel Birch

Note: there is now an official GitHub repository for Superfish.

Overview

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements:

Need help? Check out the Support options available to you.

Quick Start Guide

  1. Begin with a working pure CSS dropdown menu based on nested unordered lists. For each li:hover selector in your CSS, add an equivalent li.sfHover selector. Use display:none rather than left:-9999em to hide submenus. To make this step easy, there are cross-browser CSS files for a variety of menu types available in the download section of this site.
    <link href="superfish.css" rel="stylesheet" media="screen">
  2. Link to the superfish.js file (after including jQuery) using a script tag in the head of your document.
    <script src="jQuery.js"></script>
    <script src="superfish.js"></script>
  3. Call superfish() on the containing ul element.
    <script>
    
    	jQuery(document).ready(function() {
    		jQuery('ul.sf-menu').superfish();
    	});
    
    </script>
    There are many options available to customise your menu. You can find out about them in the Options tab of this site.
Fork me on GitHub