title: jquery hover menu
body: <p>I am using jquery hover to display a submenu(id="submenu1") when hovering on the menu link(class="menu1").</p>
  
  <p>I have used this code:</p>
  
  <pre><code>sp = $('img[class="menu1"]');
  pn = $('#submenu1');   
  sp.hover(function(){
    pn.show();
  },
  function(){
    setTimeout(function(){pn.hide();}, 500);
  });
  
  pn.hover(function(){
    pn.show();
  },
  function(){
     pn.hide();
  });
  </code></pre>
  
  <p>The thing is, I want the sub menu to stay in case the user is hovering on it. 
  Sometimes it works, sometimes no.. 
  I have seen a few examples, none of them worked for me..</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>The submenu <strong>is not in the menu hierarchy</strong> (it's absolutely positioned)</p>
  
  <pre><code>&lt;!--menu btn to hover above:--&gt;
  &lt;img src="menu.gif" alt="menu" /&gt;
  
  &lt;!--completly unrelated submenu:--&gt;
  &lt;div id="submenu" &gt;
  ...
  &lt;/div&gt;
  </code></pre>