Suckerfish Menus

example from "JQuery Novice to Ninja" (doc page 169 page page 145) This includes the use of the hoverIntent plugin which helps detect whether a user is intending to hover over an item or has just passed briefly over it on the way to another location.

by beej

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
<ul id="menu">
 <li><a href="#">What's new?</a>
     <ul class="active">
         <li><a href="#">Weekly specials</a></li>
         <li><a href="#">Last night's pics!</a></li>
         <li><a href="#">Users' comments</a></li>
     </ul>
 </li>
 <li><a href="#">Member extras</a>
     <ul>
         <li><a href="#">Premium Celebrities</a></li>
         <li><a href="#">24-hour Surveillance</a></li>
     </ul>
    </li>
</ul>

CSS

#container {
 position: relative;
}

#menu {
 position: absolute;
 top: 0;
 right: 0;
}

#menu, #menu ul {
 padding: 0;
 margin: 0;
 list-style: none;
}

#menu li {
 float: left;
 background: blue;
}

#menu a {
display: block;
 padding: 4px;
 width: 10em;
 color: #fff;
}

#menu li ul {
 position: absolute;
 width: 10em;
 left: -999em;
}

#menu li:hover ul, #menu li ul:hover {
 left:auto;
}

JavaScript

$('#menu li ul').css({
    display: "none",
    left: "auto"
});


$('#menu li').hoverIntent(function() {
    $(this).find('ul').stop(true, true).slideDown('fast');
}, function() {
    $(this).find('ul').stop(true, true).fadeOut('fast');
});