Как добавить наведение в раскрывающийся список?

$(".dropdown").click(function(){
  $(this).toggleClass('is-active');
});

.arrow-toggle {
  &:before, &:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0;
    right: 5px;
  }
  &:before {
    position: absolute;
    z-index: 1;
    // 50% - half of arrow size - arrow thickness
    top: calc(50% - 7px);
    border-color: blue transparent transparent;
  }
  &:after {
    border-color: yellow transparent transparent;
    position: absolute;
    top: calc(50% - 5px);
  }
}

.dropdown {
  width: 200px;
   height: 50px;
  background: blue;
  position: relative;
  @extend .arrow-toggle;
  
  &.is-active {
    transform: scaleY(-1);
  }
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "dropdown"></div>