hoverintent.js with slideToggle

I have a navigation menu with the following markup:

<ul class="main-nav">
    <li><a href="url/page">Parent</a>
        <ul class="main-nav-child">
            <li><a href="url/page">Child</a></li>
            <li><a href="url/page">Child</a></li>
            <li><a href="url/page">Child</a></li>
        </ul>
     </li>
</ul>

I'm using slideToggle to hide/show the child UL: ul.main-nav-child, like this:

$(function () {
    $('ul.main-nav-child').hide();
    $('.main-nav > li').hover(function () {
        $('ul', this).slideToggle(300);
    });
});

I'm trying to make it work with the hoverintent.js plugin, after reviewing the examples given here, I'm still at a dead end making it work.

Here's what I've tried so far:

$('.main-nav > li').hover(function(){
        $('ul', this).doTimeout( 'slideToggle', 250 );
    }, function(){
        $('ul', this).doTimeout( 'slideToggle', 250 );
});

Any help or direction is appreciated.

Try this:

DEMO

$(function () {
    $('ul.main-nav-child').hide();
    $('.main-nav > li').hover(function(){
        $(this).doTimeout( 'hover', 250, function() {
            $('.main-nav-child').slideToggle(250);
        });
    });
});