Question

I’m building a drop down menu. The main image has a rollover and a rollout event toggling display of a div that contains my pop-up menu. Trouble is when I roll out of the main image my pop-up menu disappears (obviously!). I want to be able to move the mose down over the pop-up menu without it dissapearing. I also want the images to have a rollover state – Heres my code:

<a class="mypage" href="mypage.html" id="mypageid" onmouseover="document.getElementById('menu-container').style.display = 'block';"  onmouseout="document.getElementById('menu-container').style.display = 'none';"></a>
<div id="menu-container">
    <ul>
        <li><a href="#"><img src="images/nav/button1.jpg" alt="" width="126px" height="21px"/></a></li>
        <li><a href="#"><img src="images/nav/button2.jpg" alt="" width="126px" height="21px"/></a></li>
        <li><a href="#"><img src="images/nav/button3.jpg" alt="" width="126px" height="21px"/></a></li>
    </ul></div>

Answer 1

A common pattern used to solve this problem is to delay hiding the menu with a timer. If the user’s mouse re-enters the trigger or the menu itself before that timer has fired, the timer (and hide) is cleared.

var menuTimer = null;

$('.mypage, #menu-container').mouseenter(function(e) {
    $('#menu-container').show();
    clearTimeout(menuTimer);
});

$('.mypage, #menu-container').mouseleave(function(e) {
    menuTimer = setTimeout(function() {
        $('#menu-container').hide();
    }, 300);
});

Example: http://jsfiddle.net/xA6MH/

This concept can easily be adapted to vanilla JS.