HTML and JavaScript

In a very simple way, with CSS and a few lines of Javascript. Example

  

Just like your image example, you only need to act in CSS. Have fun !!

<style type="text/css"> 
#showDiv {
    width:250px;  
    margin:auto;
    position: absolute;
    border: 3px solid #73AD21;
    top: 44px; 
    left: 10px;
    z-index:1; 
    background-color: #F5F5F5;
    text-align: center; 
    padding:3px;
    color: black;
    font-family: Arial;
    font-size: 13px;
    cursor: point;
}   

.fechar {
    text-align: right;
    margin-right: 10px;
    font-size: 12px;
    color: blue;
}
</style>

<script type='text/javascript'>

function show() {
    showDiv.style.display='inline-block';
}

function hide(obj) {
    var el = document.getElementById(obj);
    el.style.display = 'none';
}

</script>

<img src="https://i.stack.imgur.com/sFkYI.png"id="link" onclick="show()">

<div style="display: none;" id="showDiv" onClick="hide('showDiv')">

    <h3 style="background-color: #C0C0C0">CAIXA DE ENTRADA</h3>

    <p>Você pode configurar esta janela com CSS.No momento o CSS é conforme mostrado abaixo</p>
    <p>#showDiv {<br>
    width:250px; <br>
    margin:auto;<br>
    ...............<br>
    }</p>

    <form action="https://pt.stackoverflow.com/unanswered" method="post"> 
    <p>Registre-se ou faça <a href="#">log-in</a></p>
    <p><input type="submit" value="Registrar-se"  style="color: #000000; background-color: #FFFFFF"> </p>
    </form>
    <p class="fechar"><span style="cursor:pointer">fechar</span></p>

</div>