title: JQuery Display DIV on Hover and New Div Stays
body: <p>I currently have a DIV with class="toggle-drop2" that contains the text "VIEW MORE"</p>
  
  <p>Under this DIV is another DIV with id="category-drop"</p>
  
  <p>With the current JQuery:</p>
  
  <pre><code>jQuery('document').ready(function(){
  jQuery(".toggle-drop2").hover(function () {
  $this = jQuery(this);
  $this.hasClass('open') ? ($this.removeClass('open')) : $this.addClass('open');
  jQuery('#category-drop').slideToggle();
  });
  });
  </code></pre>
  
  <p>When you hover over the "toggle-drop2" DIV, the "category-drop" DIV will appear. Now does anyone know how I can make the "category-drop" DIV stay if I hover over it?</p>
  
  <p>Right now if I hover over the "category-drop" DIV, the DIV dissapears.</p>
  
  <p>The HTML is this:</p>
  
  <pre><code>&lt;div id="toggle-drop-link-container" align="center"&gt;
  &lt;a href="#" class="toggle-drop2"&gt;ALL ITEMS&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="category-drop"&gt;
  Something here
  &lt;/div&gt;
  </code></pre>