-1

Eu preciso criar um menu drop-down com a seguinte estilização:

inserir a descrição da imagem aqui

Como podem notar, obrigatoriamente ele deve estar alinhado com a 'arrow' apontando para o centro do elemento-pai. Tentei inúmeras combinações de estilização, mas nada funcionou. Ou ele é alinhado à esquerda do elemento, ou à direita. Não consigo de maneira alguma alinhar ao centro. Estou postando aqui somente as partes mais importantes do código para facilitar a compreensão. Segue:

O HTML fiz assim:

<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>

O CSS (Usando 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%;
}

Procurei por algumas horas na internet afora por uma solução, e ao que tudo indica somente com JavaScript poderei atingir este resultado. Alguém saberia me dizer como fazer isso com ou sem JavaScript?

1
  • Crie um exemplo no JSFiddle que produza o problema. É complicado ter que processar o SASS pra ver como vai ficar o resultado e então responder. 24/02/2015 às 20:26

1 Resposta 1

1

Você pode definir um width fixo na ul.user-actions-dropdown e depois posicionar via CSS com position, left e margin-left.

Algo tipo isso: http://codepen.io/anon/pen/pvVxNd

Também há outra maneira, que é usando a propriedade transform.

Ex: -webkit-transform: translateX(-50%);

1
  • Interessante a sua solução... Parece meio gambiarra... mas funcionou muito bem! 24/02/2015 às 21:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .