Dropdown with multiple triangles

I am developing an application and I have three buttons on the nav bar (messages, notifications and user photo).

When clicking on each one, a dropdown appears (for each one) and has that arrow (the triangle) that should point to each one of the buttons if selected (I want a behavior like Google or freelancer.com). At the moment I just did what I described (the dropdown works with Bootstrap).

Example (site freelancer.com)

(It'sasifthetrianglehaschangedpositionaccordingtothebutton,butthedropdowndoesnot)

Summaryofabutton

<liclass="dropdown">
        <!--Mensagens 2-->
        <a href="#" style="padding-right: 2px; padding-top: 10px !important;" class="nav-button profile" data-toggle="dropdown">
            <span style="font-size: 20px;" class="fa fa-envelope"></span>
            <sup><span class="notification">20</span></sup>
        </a>
        <div class="dropdown-menu dropdown-menu-right">
            <a href="#">Mensagens</a>
            <a href="#">Configurações</a>
            <a href="#">Link 3</a>
        </div>
    </li>

NOTE: These are names because I have not yet finished kkkkkkk (test only).

Dropdown CSS: after (the arrow):

.dropdown-menu:after{
     content: "";

     width: 0;
     height: 0;

     position: absolute;

     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-bottom: 10px solid #fff;

     top: -10px;
     right: 20%;
}

I do not think that way (and I have no idea what that is). I ask the help of you friends ... Ah, also wanted to put a border on the arrow if possible.