JSFiddle - React, Tailwind, and code Playground

by Vladislav Altyncev

HTML

<div class="avatar_mini">
  <ul>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
  </ul>
</div>

CSS

.avatar_mini {
  position: relative;
  left: 250px;
  background: red;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin: 15px 15px 15px 0px;
}
.avatar_mini > ul {
  width: 220px;
  height: 160px;
  border-radius: 5px;
  margin-top: 50px;
  float: right;
  background: red;
  display: none;
}
/* .avatar_mini:hover ul {
  display: block;
} */
.avatar_mini li {
  display: block;
}

JavaScript

$(document).click(function(){
  $(".avatar_mini > ul").hide();
});

$(".avatar_mini").click(function(e) {
   $(".avatar_mini > ul").slideToggle(200);
   e.stopPropagation();
});