title: jquery dropdown with separate container
body: <p>I have a structure like this:</p>
  
  <pre><code>&lt;div class="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="/dropdown1"&gt;item1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/dropdown1"&gt;item2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/dropdown1"&gt;item3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="submenu"&gt;
      &lt;div class="dropdown1"&gt;content1&lt;/div&gt;
      &lt;div class="dropdown2"&gt;content2&lt;/div&gt;
      &lt;div class="dropdown3"&gt;content3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Submenu content is invisible, css:</p>
  
  <pre><code>.submenu div{display:none;}
  </code></pre>
  
  <p>With jquery I want to when hover on item (<em>.menu ul li a</em>)
  1. take attribute <em>href</em> without '/' and show same name <em>div</em> from .submenu.
  2. add class 'active' to item (<em>.menu ul li a</em>)</p>
  
  <p>And hide this <em>div</em> if mouse out from this container or menu item and remove class 'active' (like classic dropdown menu)</p>
  
  <p>This fiddle <a href="http://jsfiddle.net/jzj5wub6/" rel="nofollow">http://jsfiddle.net/jzj5wub6/</a></p>