Using hoverintent, instead of show/hide...help using changing code please

I know there are many great helpers on this site, I am still learning jquery, but I love the functionality behind it. Recently I created a megadrop down menu, but I started getting a lot of recommendations to use the hoverintent plugin instead of using show/hide. I am lost trying to change my coding around to get it to work...PLEASE HELP...THANKS AS ALWAYS GUYS AND GALS!!!

OH and I think that changing to hoverintent will stop the overflows from building up too, but I do not think my code is working to stop that from happening?

My site...only the About DKE dropdown works...

http://www.nestudiosonline.com/test.php

my jquery script...

$(document).ready(function() {
    // shows the hidden div in the list
    $('#dave').mouseover(function() {
        $('#aboutdke').show('slow');

    });
    // hides the hide the div again for that list item
    $('#dave').mouseleave(function() {
        $('#aboutdke').hide('slow');

    });
});

Here is my html....

<div id="pagelinks">
 <ul id="menu">
     <li class="mega"><a class="dkeorg" href="#">DKE.ORG</a></li>
        <li class="megamenu" id="dave"><a class="links" href="#">ABOUT DKE</a><div id="aboutdke">
       开发者_开发技巧(about dke div content)
            </div>
  </div></li>
        <li class="megamenu"><a class="links" href="#">ALUMNI</a></li>
        <li class="megamenu"><a class="links" href="#">UNDERGRADUATES</a></li>
        <li class="megamenu"><a class="links" href="#">EVENTS</a></li>
        <li class="megamenu"><a class="links" href="#">MULTIMEDIA</a></li>
        <li class="megamenu"><a class="links" href="#">SHOP DKE</a></li>
      </ul>
 </div>

Two things before I get to the real answer:

1. You're missing the opening body tag after your doctype.

2. Only lowercase tags are valid in XHTML.

The events are only triggered for #aboutdke because that's the one element you have hardcoded into the event callback functions. Try something more abstract:

$('#menu > li').mouseover(function() {
    $(this).children().is('div').show('slow');
});
$('#menu > li').mouseleave(function() {
    $(this).children().is('div').hide('slow');
});

This should (if memory serves) work for every menu item.