How to center a dropdown with JavaScript?

I need to create a drop-down menu with the following styling:

Asyoucansee,itshouldbealignedwiththe'arrow'pointingtothecenteroftheparentelement.Itriednumerouscombinationsofstylization,butnothingworked.Eitheritisalignedtotheleftoftheelement,ortotheright.Icannotinanywayaligntothecenter.I'mpostinghereonlythemostimportantpartsofthecodetomakeiteasiertounderstand.Following:

HTMLIdidthis:

<liclass="user-actions-menu-item dropdown-trigger" id="admin-dropdown-trigger">
    <a href="#">
        <i class="icon-help-circled"></i>
    </a>

    <ul class="user-actions-dropdown">
        <li class="user-actions-dropdown-item">
            <a href="#">
                <i class="icon-user"></i>
                Conta
            </a>
        </li>

        <li class="user-actions-dropdown-item">
            <a href="#">
                <i class="icon-info-circled"></i>
                Notificações
            </a>
        </li>
    <ul>
</li>

CSS (Using SASS):

.dropdown-trigger {
    position: relative;
}

.user-actions-dropdown {
        display: block;
        position: absolute;
        width: 180px;
        height: auto;
        background-color: $light-blue;
        z-index: 12;
        list-style: none;
        padding: 0;
        font-size: 1em;
        margin: auto;
        @include bordered(1px, solid, $light-gray);
        margin-top: 15px;
        left: 0;
        right: 0%;
}

I searched for a few hours on the internet for a solution, and it seems that only with JavaScript can I achieve this result. Would anyone know how to do this with or without JavaScript?