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

Question

[L1nw0od]

Здравствуйте, все также разбираю код и вот теперь самый интересный вопрос возник )
Как сделать с помощью 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>

Answer 1

[Антон]

https://jsfiddle.net/hcqfoy0v/

Comments

[L1nw0od]

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

[Антон]

L1nw0od, Естественно скрывает, т.к. когда Вы покидаете элемент вызвавший событие, оно исчезает. То, что вы попросили, так оно и работает.
https://jsfiddle.net/hcqfoy0v/2/

[L1nw0od]

Антон, Большое спасибо ) еще маленькая просьба - можно как-то сделать чтоб при наведении открывался блок и я мог успеть навести туда мышкой чтоб он не скрылся ?
а так огромное спасибо )

[Антон]

L1nw0od, Ссылку я вам скинул в предыдущем комментарии. В Вашем случае, лучше использовать не наведение, а клик по элементу

[L1nw0od]

Антон, окей спасибо, но если не затруднит показать как будет наведение буду оченьблагодарен

Answer 2

[Максим Тимофеев]

а зачем тут js, если это работа для супермена, сорри, для css:

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