How do div with arrow?

Question

I am grateful if someone can show how to do these div’s that stay on the globe site with a small "arrow" pointing to the item in which the user is browsing, using only HTML and CSS
Follow the example image:

Answer 1

*{
 padding: 0px;
 margin: 0px;
}
body{
 background-color: lightyellow;
}
#menu{
 position: relative;
 height: 40px;
 width: 300px;
 background-color: lightgreen;
 overflow: visible;
 margin: 50px;
}
#menu > #dropdown{
 position: absolute;
 top: 60px;
 background-color: white;
 box-shadow: 0px 0px 10px #888888;
 display: none;
 width: 300px;
 height: 300px;
}
#menu:hover > #dropdown{
 display: block;
}
#menu > #dropdown > span{
 position: relative;
 margin: 20px;
 clear: both;
 display: block;
}
#menu > #dropdown > #seta{
 width: 0px;
 height: 0px;
 border-style: solid;
 border-width: 15px;
 border-color: transparent;
 border-bottom-color: white;
 position: relative;
 margin-top: -30px;
 margin-left: 135px;
 clear: both;
}

<div id="menu">Passe o mouse
  <div id="dropdown"><div id="seta"></div><span>Ola</span></div>
</div>