Jquery dropdown menu click always open

Question

I created a dropdown menu click, but it have a little weirdness. When I click the button dropdown, the dropdown menu has appear. But when I move my cursor to another (without click the button dropdown again), the dropdown menu dissapear and it has become hoverable dropdown menu not dropdown menu click (Sorry for my bad English)

How can I make the dropdown menu click always appear when I click the button dropdown and move the cursor?

(Here is my code)

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");
        });
      });

Answer 1

Without changing your code too much, you can just remove the pointer-events (clicks, etc.) by adding:

pointer-events:none; to aside.sidebar ul li ul.dropdown_menu

and

pointer-events:auto; to aside.sidebar ul li ul.dropdown_menu.active

Answer 2

The hoverable dropdown menu is because you have set the opacity property to 0 in your css aside (dropdown_menu). You must change opacity:0 to opacity:1. Here is your code with error:

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

Replace by (fixed opacity):

 aside.sidebar ul li ul.dropdown_menu {
  opacity: 1;
  visibility: hidden;
  height: auto;
  width: 100%;
  margin-top: -1px;
  position: absolute;
  transition: all 0.5s;
  border-left: 1px solid #2c3e50;
  background-color: #34495e;
}

Answer 3

I personally would use hover rather than click for a child menu. Let me know how you go with this. Stays active until clicked out.

aside.sidebar ul li ul.dropdown_menu {
  display: none;
  height: auto;
  width: 100%;
  margin-top: -1px;
  position: absolute;
  transition: all 0.5s;
  border-left: 1px solid #2c3e50;
  background-color: #34495e;
  left:200px;
  top:0;
}

aside.sidebar ul li ul.dropdown_menu.active {
  display: block !important;
}

Working in this snippet.

 $(document).ready(function() { $('.button_dropdown').click(function() { $('.dropdown_menu').toggleClass('active'); }); }); 

 aside.sidebar ul li ul.dropdown_menu { display: none; height: auto; width: 100%; margin-top: -1px; position: absolute; transition: all 0.5s; border-left: 1px solid #2c3e50; background-color: #34495e; left:200px; top:0; } aside.sidebar ul li ul.dropdown_menu.active { display: block !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <aside class="sidebar"> <ul> <li>Homepage</li> <li class="button_dropdown"><a href="javascript:void(0)" class="dropdown-toggle">Events Organizer</a> <ul class="dropdown_menu"> <li>Create Events</li> <li>List Events</li> </ul> </li> <li>Peserta Events</li> </ul> </aside>