[jQuery] [hoverIntent]Simple Dropdown Menu (not quite so simple apparently)

[jQuery] [hoverIntent]Simple Dropdown Menu (not quite so simple apparently)


I've built some CSS dropdown menus which work properly on their own:
<ul>
    <li class="menu-link">Dual Sport</a>
        <ul class="dropdown">
            <li><a href="../dskits/dskit.htm">Dual Sport Kits</a></li>
            <li><a href="../dskits/lightcoils.htm">Lighting Stators</a></li>
            <li><a href="../main/vapor.htm">Vapor Speedo/Tach</a></li>
            <li><a href="../tanks/clarke.htm">Fuel Tanks</a></li>
        </ul>
    </li>
</ul>
<li class="menu-link"> is the hover trigger element
<ul class="dropdown"> is the dropdown element which is toggled between
display:none and display:block
For the sake of IE6 users, and to improve usability I'm adding in a
simple (or so I thought) call to hoverIntent to show and hide the
menus. Problem is I can't get it to actually do anything.
Here is my current code:
$(document).ready(function(){
    $("li.menu-link").hoverIntent(function(){$(this).children
('ul.dropdown').fadeIn('500');},function(){$(this).children
('ul.dropdown').fadeOut('500');});
});
I'm not getting any errors so I can't tell what exactly is wrong here.
Anyone have any ideas? Or is my approach wrong?
Thanks in advance for any replies.