jQuery: how to implement this roll-out effect?

I need some help to implement this roll over / out effect.

This is the screenshot: http://dl.dropbox.com/u/72686/roll-over-out.开发者_如何转开发png

I have a menu. When I roll over the item "Products" the popup block appears below it, with a tree with all products.

<div id="menu">
   <div id="product"> Roll over here </div>
   ...
</div>

<div id="popup">
  <div>  <a> link </a> </div>
  <div>  <a> link </a> </div>
  <div>  <a> link </a> </div>
  ...
</div>

This block has css:

#popup {
position:fixed
display:none
}

Now, it is clear how to implement roll over to show the block:

("#product").mouseover(function() { 
                $('#popup').css("display","block");
            })

However how can I handle the rollout ? I have the following issues:

1) If I add roll-out to the menu item "#product", when I roll-out from it (to move to the popup with product trees), I make this last one to disappear (because I'm leaving the menu item).

2) If I add roll out functionality to the popup, I have issues with his children. i.e. If I move the mouse over a link of the tree, the popup disappear (because I'm leaving the parent #popup).

thanks

ps. I cannot use :hover (it is not supported by jquery version on Drupal CMS).

---

Firstly I think you will find that mouseenter and mouseleave are better events for this kind of thing. See the jQuery example in IE to understand why, not a huge problem but you may end up wit flickering otherwise.

However that will still not solve your problem. I would suggest use a setTimeout to close the menu, and then if your mouse enters the menu before the time out cancel the time out:

var t;
$("#product").mouseleave(function() { 
            t = setTimeOut(function(){$('#popup').hide();}, 100);
        })

$("#popup").mouseenter(function() {
    if(t)
        {
            clearTimeout(t);
            t=null;
        }});

This will prevent the popup from closing if you move from the product element to the pop up element. The clear timeout method prevents the timeout function from being executed.

---

Thorough Tutorial: Drop down menu

---

I have created similar solution, you can check it out here. See the demo here.

---

By the way, :hover isn't jQuery - it's CSS. http://www.w3schools.com/cssref/sel_hover.asp