title: jQuery: how to implement this roll-out effect?
body: <p>I need some help to implement this roll over / out effect.</p>
  
  <p>This is the screenshot: <a href="http://dl.dropbox.com/u/72686/roll-over-out.png" rel="nofollow noreferrer">http://dl.dropbox.com/u/72686/roll-over-out.png</a></p>
  
  <p>I have a menu. When I roll over the item "Products" the popup block appears below it, with a tree with all products.</p>
  
  <pre><code>&lt;div id="menu"&gt;
     &lt;div id="product"&gt; Roll over here &lt;/div&gt;
     ...
  &lt;/div&gt;
  
  &lt;div id="popup"&gt;
    &lt;div&gt;  &lt;a&gt; link &lt;/a&gt; &lt;/div&gt;
    &lt;div&gt;  &lt;a&gt; link &lt;/a&gt; &lt;/div&gt;
    &lt;div&gt;  &lt;a&gt; link &lt;/a&gt; &lt;/div&gt;
    ...
  &lt;/div&gt;
  </code></pre>
  
  <p>This block has css:</p>
  
  <pre><code>#popup {
  position:fixed
  display:none
  }
  </code></pre>
  
  <p>Now, it is clear how to implement roll over to show the block:</p>
  
  <pre><code>("#product").mouseover(function() { 
                  $('#popup').css("display","block");
              })
  </code></pre>
  
  <p>However how can I handle the rollout ? I have the following issues:</p>
  
  <p>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).</p>
  
  <p>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).</p>
  
  <p>thanks</p>
  
  <p>ps. I cannot use :hover (it is not supported by jquery version on Drupal CMS).</p>