show و hide شدن منوی dropdown توسط cursor ماوس

سلام دوستان ممنون میشم راهنمایی کنید. من میخوام منوی dropdown زمانی که نشانگر ماوس میره روی گزینه اصلی باز بشه و زمانی که نشانگر میره کنار، بسته بشه. همچنین زمانی که نشانگر روی پنجره و گزینه های زیرمنو قرار داره، همچنان پنجره ی dropdown باز بمونه تا زمانی که ماوس کلا بره کنار.(چیزیه که متداول هست)
خودم با جی کوئری نوشتم ولی مشکلی که هست اینه که زمانی که ماوس روی پنجره و گزینه های زیرمنو قرار میگیره، مدام زیرمنو باز و بسته میشه!
کدها:

<li class="nav-item dropdown">
                    <a href="#" id="ddl" class="nav-link">تست</a>
                    <div id="ddm" class="dropdown-menu">
                        <a href="" class="dropdown-item">تست</a>
                        <a href="" class="dropdown-item">تست</a>
                        <a href="" class="dropdown-item">تست</a>
                    </div>
                </li>

کلاسهایی که توی کدها هست، مربوط به بوت استرپه
کد جی کوئری شو تا اینجا درست نوشتم که فقط وقتی ماوس میره روی گزینه اصلی، زیرمنو باز میشه و وقتی میره کنار بسته میشه، ادامشو برای باز موندن زیرمنو وقتی که ماوس روی باکس و گزینه های زیرمنو قرار میگیره رو نمیدونم چجوری بنویسم که درست کار کنه

 $("#ddl").hover(function(){
    $("#ddm").toggle(200);
    });