Do we open a block on hover?

Question

css

Hello, I'm also parsing the code and now the most interesting question has arisen)
How to open the menu block on hover using js and so on? (the main task is when we hover over a menu item, open another 1 block pops up) when we remove the mouse from it, it disappears)
---
Here are the menu and styles:

<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>

Answer 1

https://jsfiddle.net/hcqfoy0v/

Answer 2

why is js here, if this is a job for superman, sorry, for css:

.my_link > .hidden_block {
display: none;
}
.my_link:hover > .hidden_block {
display: block;
}