JQuery Display DIV on Hover and New Div Stays

Question

I currently have a DIV with class="toggle-drop2" that contains the text "VIEW MORE"

Under this DIV is another DIV with id="category-drop"

With the current JQuery:

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();
});
});

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?

Right now if I hover over the "category-drop" DIV, the DIV dissapears.

The HTML is this:

<div id="toggle-drop-link-container" align="center">
<a href="#" class="toggle-drop2">ALL ITEMS</a>
</div>

<div id="category-drop">
Something here
</div>

Answer 1

Nest the elements:

<div class="toggle-drop2">
    <div id="category-drop">
        <!-- dropdown content -->
    </div>
</div>

js

jQuery(document).ready(function($){
    $(".toggle-drop2").hover(function () {
      $(this).toggleClass('open');
      $('#category-drop').slideToggle();
    });
});