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,


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,


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


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