How to center a dropdown with Javascript?

Question

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

As you can see, it must be aligned with the 'Arrow' pointing to the center of the parent element. I tried numerous styling combinations, but nothing worked. Either it is aligned to the left of the element, or to the right. I can not in any way align to the center. I am posting here only the most important parts of the code to facilitate understanding. Follow:

HTML made it like this:

<li class="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 everything indicates only with Javascript I can achieve this result. Would anyone know how to do this with or without Javascript?

Answer 1

You can set a fixed width on ul.user-actions-dropdown and then position via CSS with position, left and margin-left.

Something like this: http://codepen.io/anon/pen/pvVxNd

There is also another way, which is by using the Transform property.

Ex: -Webkit-Transform: translateX(-50%);