При наведении открываем блок?

Здравствуйте, все также разбираю код и вот теперь самый интересный вопрос возник )
Как сделать с помощью js и т д открытие блока меню при наведении ? (основная задача - когда наводим на элемент меню открываем всплывает еще 1 блок) когда убираем мышку с него то он исчезает)
---
Вот меню и стили:

<div class="menu">
                    <nav class="navbar navbar-expand-lg">
               
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto" style="    margin-top: -1px;">
                                <li class="nav-item active"> <a class="nav-link " href="#">Programmes <span class="sr-only">(current)</span></a> </li>
                                <li class="nav-item"  data-toggle="popup-menu" aria-expanded="false"> <a class="nav-link" href="#">About</a> </li>
                                <li class="nav-item"> <a class="nav-link disabled" href="#">Faculty</a> </li>
                                <li class="nav-item"> <a class="nav-link disabled" href="#">Campus</a> </li>
                                <li class="nav-item"> <a class="nav-link disabled" href="#">Research</a> </li>
                                <li class="nav-item"> <a class="nav-link disabled" href="#">Addmissions</a> </li>
                                <li class="nav-item"> <a class="nav-link disabled" href="#">Contacts</a> </li>
            
                            </ul>
                        </div>
                    </nav>
                </div>
  <style>
                
                .popup-menu {
                    width: 899px;
                    margin: 0 auto;
                    /*              height: 19.3px;*/
                    position: relative;
                    display: none;
                }
                
                .popup-menu:before {
                    content: '';
                    position: absolute;
                    width: 876px;
                    height: 15px;
                    bottom: -15px;
                    transform: skewX(-120deg);
                    left: -5px;
                    background: #B3C667;
                    top: -15px;
                }
                
                .wrapper-popup-menu {
                    width: 880px;
                    margin: 0 auto;
                
                    height: 226px;
                    padding: 20px;
                    background: #C9DF75;
                    box-shadow: 0 25px 58px 0 rgba(27, 34, 0, 0.57);
                    margin-top: 15px;
                }
             
                .navbar-nav > li:hover .popup-menu {
    display: block;
}
            </style>
            <div class="popup-menu">
                <div class="wrapper-popup-menu">
                    <ul>
                        <li><a href="">Lorem ipsum dolor.</a></li>
                    </ul>
                </div>
            </div>