<div class="dropdown">
  <a href="javascript:;" class="title">dropdown <span><i class="fa-solid fa-angle-down"></i></span></a>
  <ul>
    <li><a href="javascript:;">메뉴1</a></li>
    <li><a href="javascript:;">메뉴2</a></li>
    <li><a href="javascript:;">메뉴3</a></li>
    <li><a href="javascript:;">메뉴4</a></li>
  </ul>
</div>

.dropdown{
  position:relative;
  width: 100px;
  height: 30px;
  background:#ccc;
}
a.title{
  display:block;
  width: 100px; 
  height: 30px;
  line-height: 30px;
  text-align: center;
}
a.title span.is-active i{
  transform: rotate(180deg);
  transition: all 0.3s;
/*   perspective-origin: center; */
}
.dropdown ul{
  display:none;
  position: absolute;
  top: 30px; 
  left:0;
  width: 100px;
  background: #fff;
}
a{
  color: #000;
  text-decoration: none;
}
ul li{
  padding: 10px 0;
  width:100%;
  text-align: center;
}

var show = false;
$(".dropdown a").on('click',function(){
  this.getElementsByTagName('span')[0].classList.toggle("is-active");
  if(show){
    $('.dropdown ul').fadeOut(300);
  }else{
    $('.dropdown ul').fadeIn(300);
  }
  show = !show;
})