JSFiddle - React, Tailwind, and code Playground

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;
}