Keep css hover effect, when no longer hovering

Question

I have a problem with a button that functions as a navbar, which, when clicked, toggles a dropdown menu. I now want the button hover effect to stay when I navigate the dropdown menu or leave the dropdown menu entirely, until I close the dropdown menu again.

I looked at all the feeds to this matter but none seem to work, your help would be greatly appreciated.

$(document).ready(function() {

  $(document).on("click", function(event) {
    var $trigger = $(".dropdown");
    if ($trigger !== event.target && !$trigger.has(event.target).length) {
      $("#myDropdown").slideUp("slow");
    }
  });
  $("#dropdown-content").change(function() {
    $(".one").hide();
  });
});

.dropdown {
  width: 60px;
  height: 120px;
  top: 20px;
  left: 40px;
  position: relative;
  display: inline-block;
}

.dropbtn div {
  height: 8px;
  background-color: #808080;
  margin: 8px 0;
  border-radius: 25px;
  position: relative;
  z-index: 20;
}

.dropbtn {
  border: none;
  background-color: #fff;
  cursor: pointer;
}

.one {
  width: 8px;
  transition: 0.7s;
}

.two {
  width: 8px;
  transition: 0.9s;
}

.three {
  width: 8px;
  transition: 1.1s;
}

.dropbtn:hover .one {
  width: 60px;
}

.dropbtn:hover .two {
  width: 60px;
}

.dropbtn:hover .three {
  width: 60px;
}

.dropbtn:focus {
  outline: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

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

.dropdown-content a:hover {
  background-color: #ddd
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="dropbtn" onclick="$('#myDropdown').slideToggle('slow');"> <!--  onclick="$('#myDropdown').slideToggle('slow');" -->
					<div class="one"></div>
					<div class="two"></div>
					<div class="three"></div>
				</button>

  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Answer 1

I'd say the simplest way to stop your hamburger menu from collapsing is to add a class which will set the width to 60px, and remove that class once you click away, giving you the desired effect.

I've modified your snippet slightly.

$(document).ready(function() {
  var $trigger = $(".dropdown"); // Cache the element

  $(document).on("click", function(event) {
    $trigger.addClass('active'); // Add the class that sets the width to the children elements
    if ($trigger !== event.target && !$trigger.has(event.target).length) {
      $("#myDropdown").slideUp("slow");
      $trigger.removeClass('active'); // Remove the class to return it to the original width
    }
  });
  $("#dropdown-content").change(function() {
    $(".one").hide();
  });
});

.dropdown {
  width: 60px;
  height: 120px;
  top: 20px;
  left: 40px;
  position: relative;
  display: inline-block;
}

.dropbtn div {
  height: 8px;
  background-color: #808080;
  margin: 8px 0;
  border-radius: 25px;
  position: relative;
  z-index: 20;
}

.dropbtn {
  border: none;
  background-color: #fff;
  cursor: pointer;
}

.one {
  width: 8px;
  transition: 0.7s;
}

.two {
  width: 8px;
  transition: 0.9s;
}

.three {
  width: 8px;
  transition: 1.1s;
}

.dropbtn:hover .one {
  width: 60px;
}

.dropbtn:hover .two {
  width: 60px;
}

.dropbtn:hover .three {
  width: 60px;
}

.active div {
  width: 60px; /* This will set the children div width for you */
 }

.dropbtn:focus {
  outline: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

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

.dropdown-content a:hover {
  background-color: #ddd
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="dropbtn" onclick="$('#myDropdown').slideToggle('slow');"> <!--  onclick="$('#myDropdown').slideToggle('slow');" -->
					<div class="one"></div>
					<div class="two"></div>
					<div class="three"></div>
				</button>

  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Answer 2

You can add a class onClick to keep the hover state:

$(document).ready(function() {

  $(document).on("click", function(event) {
    var $trigger = $(".dropdown");
    if ($trigger !== event.target && !$trigger.has(event.target).length) {
      $("#myDropdown").slideUp("slow");
      $('.dropbtn').removeClass('active');
    }
  });
  $("#dropdown-content").change(function() {
    $(".one").hide();
  });
});

.dropdown {
  width: 60px;
  height: 120px;
  top: 20px;
  left: 40px;
  position: relative;
  display: inline-block;
}

.dropbtn div {
  height: 8px;
  background-color: #808080;
  margin: 8px 0;
  border-radius: 25px;
  position: relative;
  z-index: 20;
}

.dropbtn {
  border: none;
  background-color: #fff;
  cursor: pointer;
}

.one {
  width: 8px;
  transition: 0.7s;
}

.two {
  width: 8px;
  transition: 0.9s;
}

.three {
  width: 8px;
  transition: 1.1s;
}

.dropbtn:hover .one,
.dropbtn.active .one{
  width: 60px;
}

.dropbtn:hover .two,
.dropbtn.active .two{
  width: 60px;
}

.dropbtn:hover .three,
.dropbtn.active .three{
  width: 60px;
}

.dropbtn:focus {
  outline: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

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

.dropdown-content a:hover {
  background-color: #ddd
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="dropbtn" onclick="$('#myDropdown').slideToggle('slow');$(this).toggleClass('active');"> 
					<div class="one"></div>
					<div class="two"></div>
					<div class="three"></div>
				</button>

  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>