How to show a div element on mouse hover?

I need to show a div when a list element is hovered over, sort of like a drop-down menu.

I already have a way to do this with jQuery which is what I want, but the problem is that when I move mouse away from the list (li element), the div disappears. I want to be able to move the mouse from the list element to the div and be able to interact with the elements within the div.

This would be solved with a click function but I don't want to use click because the elements on the div will contain anchor links that when click will take users down the page, therefore you can see how a click function that shows and keep the div is not a good idea, unless I can find a way to close the div when its contents (anchor links) are clicked.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  .nav-item-dropdown {
    position: absolute;
    /* other styles ... */
  }
</style>

<div class="nav-wrap">
  <ul>
    <li id="nav-item1" class="nav-item-wrap">Services</li>
    <li id="nav-item2" class="nav-item-wrap">Projects</li>
  </ul>
</div>

<div class="nav-item-dropdown nav-item1-dropdown">
  <!-- Drop-down nav contents for services (title and image) wrapped by anchor link goes here -->
</div>

<script>
  $(document).ready(function() {
    jQuery('#nav-item1').hover(function() {
      $('.nav-item1-dropdown').toggle();
    });
    jQuery('#nav-item2').hover(function() {
      $('.nav-item2-dropdown').toggle();
    });
  });
</script>

I want to be able to move the mouse from the list element (.nav-item-wrap) to the div (.nav-item-dropdown) and be able to interact with the elements within the div. I don't want the div to disappear when I move the mouse away from the list element that triggered it.

Solution

.toggle() method simply toggles the visibility of elements. In your code they do well what they are for. In your case, instead of toggle use .show() and .hide() like below. You need additional class to hide div when load.

$(document).ready(function() {
  jQuery('#nav-item1').hover(function() {
    $('.nav-item1-dropdown').show();
    $('.nav-item2-dropdown').hide();
  });
  jQuery('#nav-item2').hover(function() {
    $('.nav-item2-dropdown').show();
    $('.nav-item1-dropdown').hide();
  });
});

.nav-item-dropdown {
  position: absolute;
  /* other styles ... */
}

.yourClass {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-wrap">
  <ul>
    <li id="nav-item1" class="nav-item-wrap">Services</li>
    <li id="nav-item2" class="nav-item-wrap">Projects</li>
  </ul>
</div>

<div class="nav-item-dropdown nav-item1-dropdown yourClass">
  div1
  <!-- Drop-down nav contents for services (title and image) wrapped by anchor link goes here -->
</div>
<div class="nav-item-dropdown nav-item2-dropdown yourClass">
  div2
  <!-- Drop-down nav contents for services (title and image) wrapped by anchor link goes here -->
</div>