JSFiddle - React, Tailwind, and code Playground

HTML

<div class="user-image">
<a><img  src="http://chocobento.x10.mx/wp/wp-content/uploads/2015/09/1-300x300.jpg" width="180" height="180" alt="itslino" class="avatar avatar-180 wp-user-avatar wp-user-avatar-180 alignnone photo"></a>
<div class="user-image">
	<li> Test </li>
	<li>Test 2 </li>
</div>

CSS

.user-image {
  float:none !important;
  right: 0;
  margin-right: 4.5%;
  position: absolute;
  z-index: 100;
}

 img {
  width: 65px !important;
  height: 65px !important;
  margin-top: -15px;
  border: 2px solid white;
  border-radius: 32px;
}

.user-image li {
  list-style: none;
  background-color: white;
  display: none;
  padding: 10px;
  width: 100px;
  margin-left: -35px; 
}

.user-image a:hover + .user-image li  {
    display: block;
}