jQuery slideToggle с щелчком мыши и скрыть мышью

У меня есть jQuery-навигация, которая использует slideToggle и slideUp когда я нажимаю на другой элемент nav. Однако я не могу заставить это работать так, как я хочу, так как я хочу, чтобы навигационные элементы скрывались, когда мышь оставила дочерние элементы, которые появились из функции щелчка.

Я попробовал ниже, однако, когда это оставило <h5> <ul> исчез, что имеет смысл, учитывая приведенное ниже утверждение:

$('.nav_parent h5').on('click mouseleave', function ()

Говоря, что я не уверен, как это сделать, я читал онлайн о настройке функции тайм-аута, с которой я пытался и не справился.

Так есть ли у кого-нибудь какие-либо рабочие примеры, которые у них есть или могут адаптировать мой сценарий для включения этой функции?

Мои сценарии ниже или видят jsFiddle

Заранее спасибо!

JS/js.js

$('.nav_parent h5').click(function () {
  $(this).next('.nav_child').slideToggle();
   $(this).parent().siblings().children().next().slideUp();
    return false;
});

index.html

<div class="container">
    <ul id="header_nav">
        <li class="nav_parent">
            <h5>Reports</h5>

            <ul class="nav_child">
                <li><a href="#" class="mnavlink">Download CSV</a>
                </li>
            </ul>
        </li>
        <li class="nav_parent">
            <h5>Build</h5>

            <ul class="nav_child">
                <li><a href="#" class="mnavlink">Build new site</a>
                </li>
            </ul>
        </li>
        <li class="nav_parent">
            <h5>Subscriptions</h5>

            <ul class="nav_child">
                <li><a href="#" class="mnavlink">E-Briefings</a>
                </li>
            </ul>
        </li>
        <li class="nav_parent">
            <h5>Media Store</h5>

            <ul class="nav_child">
                <li><a href="#" class="mnavlink">Image Store</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS/style.css

.nav_parent {
    display:inline-block;
    width:24%;
    background:#FCCC5F;
}
.nav_parent h5:hover {
    background:#FCE49D;
}
.nav_child {
    display:none;
}
.nav_child li {
    line-height:30px;
}
.nav_child li:hover {
    background:#FCE49D;
}