jquery display submenu while hovering

Question

I have a horizontal menu. This submenu is displayed outside the ul. When i hover en specific class (for example .p_over), I want the .submenu-div to appaer. When I hover the .submenu-div, I want it to be still there. However, when moving my mouse frome .p_over to the .submenu-div, it dissappears.

<ul class="menu">
        <li id="li_arrow_right" class="p_over"><a href="pages/over.php">Over <span>&#59230;</span></a></li>
        <li id="li_arrow_right" class="p_projecten"><a href="pages/projecten.php">Onze projecten<span>&#59230;</span></a></li>
        <li id="li_arrow_right" class="p_nieuws"><a href="pages/nieuws.php">Nieuws<span>&#59230;</span></a></li>
        <li><a href="pages/contact.php">Contact</a></li>
    </ul>
    <span id="link_search"><a href="#">&#128269;</a></span>
    <div class="btn_small" id="btn_arrow_right">Vragenlijsten<span>&#59230;</span></div>

    <div class="submenu">
        <ul class="ul_submenu">
            <li id="li_arrow_right"><a href="over.php">Wie zijn wij?<span>&#59230;</span></a></li>
            <li id="li_arrow_right"><a href="projecten.php">Wat bieden wij?<span>&#59230;</span></a></li>
            <li id="li_arrow_right"><a href="nieuws.php">Wie bent u?<span>&#59230;</span></a></li>
        </ul>
    </div>

my jquery

<script type="text/javascript">
$('.p_over').hover(function(){
    $('.submenu').slideDown(50);        
},
function(){
    $('.submenu').slideUp(50);          
});
</script>

Thanks!

Answer 1

Make the slideUp function inside of a setTimeout so that inside of the submenu you can clear the timeout (and stop the slideUp) if it is hovered over. If you want to allow more time for the user to get to the submenu before it disappears, just change the 250 in the second from last line. This is amount of time in milliseconds. At this point all you would have to do is position the submenu accordingly to the menu.

Here is a really rough DEMO

var t;
$('.p_over, .submenu').on('mouseenter', function(){
    if(t){
        clearTimeout(t);
        t = false;
    }
    $('.submenu').slideDown(50);
}).on('mouseleave', function(){
    t = setTimeout(function(){
        $('.submenu').slideUp(50);
    }, 250);
});