jQuery-сохранять слайдер DIV видимым, если навести на него указатель мыши

У меня есть ссылка (BTN-SLIDE), которая при нажатии (а не при наведении курсора) скользит вниз по другому DIV (называемому PANEL), что-то вроде выпадающего меню.

Я хочу убедиться, что раскрывающийся DIV исчезает, когда: а) мышь покидает ссылку б) мышь покидает раскрывающийся DIV

Но я также хочу, чтобы выпадающий DIV оставался видимым, пока над ним находится мышь.

Это код, который у меня есть. Проблема в том, что когда я нажимаю, чтобы открыть раскрывающийся список DIV (#panel) и оставляю ссылку (.btn-slide), не наводя указатель мыши на #panel, то #panel никогда не закрывается.

С другой стороны, если я настрою #panel на закрытие при перемещении мыши по ссылке, то #panel закроется, даже если я наведу на нее указатель мыши.

Любое решение? Спасибо!

<a class="btn-slide" href="#”>Click here to open Panel</a>    
<div id="panel"><p>ahsjdhkashdkasjhd</p></div>

$(".btn-slide").click(function(){
  $("#panel").slideDown(500);
});

     $("#panel").mouseleave(function(){
        $("#panel").slideUp(500);
});