How to come Bubble with Hover

hi, I to try to come to a Bubble when someone is above a Link. I’ll to come with Hover a thing like this,

aa2

Can Please someone help me, Thanks!

Found de solution from my Problem!
Here there are different forms for Hover and you can Download from them…

so, how I did it,

Html,

<ul>
<li class="dropdown"><a href=""><i>Home</i></a></li>
  <div class="dropdown-content"> 
   -----
   -----
</div>
</ul>

Css,

.dropdow { list-style-type: none;  }


   
.dropdown a { text-decoration: none;  padding: 0.3rem 5rem 0.3rem 0.5rem;}  
li a, #uber_us { text-decoration: none;  }  


.dropdown-content {
    display: none; 
    font-size: 0.8125rem;
	position: absolute; 
    background-color: #f1f1f1;
    min-width: 0.9375rem; 
    box-shadow: 0rem 0.5rem 1rem 0rem rgba(0,0,0,0.2); 
    z-index: 1;    

    
    
}

/* this code belong from them..... */



.dropdown-content:before {

  pointer-events: none;
  position: absolute;
  z-index: -5;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  left: calc(20% - 10px);
  top: -10px;
  border-width: 0 12px 12px 12px;
  border-color: transparent transparent #e7caca transparent;

}

/* here end the code from them ... */
   



.dropdown-content a {
    color: black;
    padding: 0.75rem 1.6875rem 0.9375rem 0.5rem;
    text-decoration: none;               
    display: block;
    font-size: 0.9375rem;
    text-align: left;
    font-weight: bold;
    
    
}


.dropdown-content a:hover { background-color: #e7caca; }


.dropdown:hover .dropdown-content {
    display: block;
    top: 2rem;
}