After creating a dropdown menu click, I noticed some strange behavior. When I click the dropdown button, the menu appears as expected. However, if I move my cursor away without clicking the button again, the dropdown menu disappears and behaves like a hoverable menu instead of staying open as a click event (Apologies for any confusion in my explanation)
https://i.sstatic.net/y2Icr.png
https://i.sstatic.net/MGn52.png
https://i.sstatic.net/8N57q.png
Is there a way to keep the dropdown menu always visible when I click the button and move the cursor?
(Below is the code snippet I am working with)
HTML
<aside class="sidebar">
<ul>
<li><a href="#"><i class="material-icons">home</i>Homepage</a></li>
<li class="button_dropdown"><a href="javascript:void(0)" class="dropdown-toggle"><i class="material-icons">widgets</i>Events Organizer <i class="material-icons multi_menu">keyboard_arrow_right</i></a>
<ul class="dropdown_menu">
<li><a href="#">Create Events</a></li>
<li><a href="#">List Events</a></li>
</ul>
</li>
<li><a href="#"><i class="material-icons">people</i>Peserta Events</a></li>
</ul>
</aside>
CSS
aside.sidebar ul li ul.dropdown_menu {
opacity: 0;
visibility: hidden;
height: auto;
width: 100%;
margin-top: -1px;
position: absolute;
transition: all 0.5s;
border-left: 1px solid #2c3e50;
background-color: #34495e;
}
aside.sidebar ul li ul.dropdown_menu.active {
opacity: 1;
visibility: visible;
height: auto;
width: 100%;
background-color: #34495e;
left: 100%;
top: 0;
transition: all 0.5s;
}
Jquery
$(document).ready(function () {
$(".button_dropdown").click(function () {
$(".dropdown_menu").toggleClass("active");
});
});