i want my dropdown to appear when the link is clicked instead of hover

Question

My code has a linkbutton and a dropdown. right now the dropdown appears on hover but i want it to work when the link is clicked. Can you guys please help me. Thanks in advance

when i tried to do it for the click the page reloads and the dropdown isn't shown.

.dropbtn {
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  color: black;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 30px;
  background-color: white;
  color: black;
  max-height: 200px;
  overflow: scroll;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 0px;
  list-style-type: none;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 200;
}

.color {
  color: black;
}

.dropdown-content li a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #2864DC;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #2864DC;
}

<div class="dropdown">
  <asp:linkbutton type="button" class="dropbtn" runat="server" CausesValidation="false" cssclass="MenuItem">
    <img alt="WorkFlow" class="MenuIcon" src="Assets/img/Reports.png" />
    <asp:label ID="Label1" runat="server" Text="Reports" />
  </asp:linkbutton>

  <ul class="dropdown-content">
    <li><a href="OEEReport.aspx" class="color">OEE</a></li>
    <li><a href="AvailabilityReportNew.aspx" class="color">Availability</a></li>
    <li> <a href="PerformanceReport.aspx" class="color">Performance</a>
      <ul>
        <li><a class="color">qwerty</a></li>
      </ul>
    </li>
    <li><a href="ProcessParameterReport.aspx" class="color">Energy</a></li>
  </ul>
</div>

expected result : dropdown should appear when the link is clicked

actual result : dropdown appears on the hover

Answer 1

You can use .toggle() function on jQuery to show/hide element inside event click and remove CSS class which show .dropdown-content on hover

check this code i did with jQuery

$(".dropdown").click(function(){
  $(".dropdown-content",this).toggle();
});

 .dropbtn  {

  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  color:black;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  top:30px;
  background-color: white;
  color:black;
   max-height: 200px;
    overflow: scroll;
    overflow-y:auto;
    overflow-x: hidden;
    margin-top: 0px;
  list-style-type: none;

  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 200;
}
.color{
    color:black;
}
.dropdown-content li a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #2864DC;
                           color:white;
}

/*.dropdown:hover .dropdown-content {display: block;}*/

.dropdown:hover .dropbtn {background-color: #2864DC;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">DropDown
  <ul class="dropdown-content"  >
  <li><a href="abc.aspx" class="color">abc</a></li>
  <li><a href="xyz.aspx" class="color">xyz</a></li>
  <li> <a href="mno.aspx" class="color">mno</a>
    <ul >
      <li><a class="color" >qwerty</a></li>
    </ul>
  </li>
  <li><a href="pqr.aspx" class="color">pqr</a></li>
  </ul>
</div>

Edit :

Also here is another example with dropdown on sub-link

    $(".dropdown").click(function(){
      $(".dropdown-content",this).toggle();
      return false;
    });

     .dropbtn  {

      padding: 16px;
      font-size: 16px;
      border: none;
    }

    .dropdown {
      position: relative;
      color:black;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      top:30px;
      background-color: white;
      color:black;
       max-height: 200px;
        overflow: scroll;
        overflow-y:auto;
        overflow-x: hidden;
        margin-top: 0px;
      list-style-type: none;

      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 200;
    }
    .color{
        color:black;
    }
    .dropdown-content li a {
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {background-color: #2864DC;
                               color:white;
    }

    /*.dropdown:hover .dropdown-content {display: block;}*/

    .dropdown:hover .dropbtn {background-color: #2864DC;}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div>DropDown
      <ul>
      <li><a href="abc.aspx" class="color">abc</a></li>
      <li><a href="xyz.aspx" class="color">xyz</a></li>
      <li class="dropdown"> <a href="mno.aspx" class="color">mno</a>
        <ul class="dropdown-content">
          <li><a class="color" >qwerty</a></li>
        </ul>
      </li>
      <li><a href="pqr.aspx" class="color">pqr</a></li>
      </ul>
    </div>

Answer 2

you can use this bootstrap dropdown easily.

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>