I'm trying to add a popup to an existing ul (#top-menu-nav) in a tool with jquery. The only thing I'm struggling with is how to add the condition to only close the dropdown when the user is not hovering the li-item ($elementLi) or the popup (.popup-links) and keep it open as long the user is hovering over one of these two elements. In other words; How can I add the condition the popup closes when the cursor leaves the li-item or the popup area, whatever is first. Currently the popup only closes when the cursor moves over the popup-area and leaves it. Thank you for your help.

JSFiddle

HTML given by the tool - not editable

<ul id="top-menu-nav">
  <li>Ex1</li>

  <li class=" ">
    <a href="/index.php?r=custom_pages%2Fview&amp;id=26" target="" data-sort-order="800"><i class="fa fa-link"></i> Links</a>
  </li>

  <li>Ex2</li>
</ul>

HTML

<div class="popup-links">
  <ul class="popup-links-content">
    
    <p style="font-weight: 700; padding-top: 20px;">Social Media</p>
    <li><a href="">LinkedIn</a></li>
    <li><a href="">Instagram</a></li>
    <li><a href="">Vimeo</a></li>

  </ul>
</div>

Jquery

$(function() {

$elementA = $('#top-menu-nav').find('a:contains("Links")');
$elementLi = $elementA.closest('li');
$elementLiPos = $elementLi.position();

    $($elementLi).mouseover(function() {
      
    var pos = $(this).position();
    var width = $(this).outerWidth();

    $('.popup-links').css({
        position: "fixed",
        top: pos.top + "px",
        left: (pos.left + width) + "px"
    }).show();
});

$('.popup-links').on('mouseleave', function(){
  $(this).hide();
});
});