horizontal drop-down menu using jquery and hoverintent

I am trying to implement a horizontal drop-down menu using jquery and hoverintent. I've almost got it but when you move your mouse away from the "li" that contains the drop-down link to another "li" in the topnav, the menu stays there.

Goal:

-click the link that triggers the drop-down menu

-menu height expands which pushes the page content down

-submenu appears

-if you move your mouse off the submenu or off the trigger li, the menu should disappear

Right now, as long as your mouse is anywhere on the menu, the submenu is still visible.

I tried to modify the code here, but mine doesn't work like the example and I don't know why.

HoverIntent jQuery plugin initiated by a click event

MY HTML:

<div id="menu">
<ul id="topnav">
  <li class="border"><a class="topnavlink" href="#">Main Link</a></li>
  <li class="border"><a class="topnavlink" href="#">Main Link</a></li>
  <li class="border"><a class="topnavlink" href="#">Main Link</开发者_Go百科a></li>
  <li class="border"><a class="topnavlink" href="#">Main Link</a>
    <ul id="subnav">
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
    </ul>
  </li>
  <li class="border"><a class="topnavlink" href="#">Main Link</a></li>
  <li class="border"><a class="topnavlink" href="#">Main Link</a></li>
  <li class="border"><a class="topnavlink" href="#">Main Link</a></li>
  <li class="noborder"><a class="topnavlink" href="#">Main Link</a></li>
</ul>
</div>

MY JQUERY:

function slideDown() {
    $(this).click(function() {
        $("#menu").stop().animate({height:"68px"}, 200);
        $("ul#subnav").slideDown(200)
    }); 
    }

function slideUp() {
    $("ul#subnav").slideUp(200);
    $("#menu").stop().animate({height:"40px"}, 200);
    }

$("ul#topnav").hoverIntent({
    sensitivity: 7,
    interval: 100,
    over: slideDown,
    timeout: 500,
    out: slideUp
})

Have you taken a look at Superfish?

http://users.tpg.com.au/j_birch/plugins/superfish/