CSS options menu

Question

Good morning, I need to create a menu in the right corner equal to the example, but I’m not getting...

when I click my button it is necessary to open the menu on top of the button without leaving the screen

I need him to be shown that way:

follows site structure containing the button:

<div class="panel-body form-group">
    <div>
        <div class="list-group margem_bottom_list_group" style="text-align:left">
            <table class="table">
                <thead>
                    <tr>
                        <th style="padding:1px">Parcela</th>
                        <th style="padding:1px">Venc.</th>
                        <th style="padding:1px">Valor</th>
                        <th style="padding:1px">Tipo</th>
                        <th style="padding:1px; text-align:right">Opções</th>
                    </tr>
                </thead>
                <tbody ng-repeat="item in receberPesq.List">
                    <th style="display: table-cell;vertical-align: middle;">{{item.parcela}}</th>
                    <th style="display: table-cell;vertical-align: middle;">{{item.dtVenc}}</th>
                    <th style="display: table-cell;vertical-align: middle; text-align:center;">{{item.valor}}</th>
                    <th style="text-align:center;font-weight: bold;display: table-cell;vertical-align: middle;" ng-class="item.tipo == 'C'?'credito':'debito'">{{item.tipo}}</th>
                    <!-- botão que chama o menu -->
                    <th style="padding:1px; text-align:right"><button type="button" ng-click="pesquisar(receber)" title="Conta" class="btn btn-default btn-fab btn-raised button_obs fa fa-ellipsis-v"></button></th>
                </tbody>
            </table>
        </div>
    </div>
</div>

EDIT: I would like to put this menu on top of the button when you click on it: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_gray

Answer 1

can make these elements stick with a sublist, this way will meet the goal easily using a little bootstrap, should stay this way :

    <tbody ng-repeat="item in receberPesq.List">
             <th style="display: table-cell;vertical-align: middle;">{{item.parcela}}</th>
             <th style="display: table-cell;vertical-align: middle;">{{item.dtVenc}}</th>
             <th style="display: table-cell;vertical-align: middle; text-align:center;">{{item.valor}}</th>
             <th style="text-align:center;font-weight: bold;display: table-cell;vertical-align: middle;" ng-class="item.tipo == 'C'?'credito':'debito'">{{item.tipo}}</th>
             <th style="padding:1px; text-align:right; width: 10px;">
                 <ul class="nav " style="list-style-type: none;">
                      <li>
                         <a data-toggle="dropdown" style="background-color: #FFFFFF;"><button type="button"  title="Conta" class="btn btn-default btn-fab btn-raised button_obs fa fa-ellipsis-v"></button> </a>
                           <ul class="dropdown-menu">
                              <li style= "font-size: 15px"><a>Pré Baixa</a></li>
                              <li style= "font-size: 15px"><a>Detalhes</a></li>
                              <li style= "font-size: 15px" ng-show="item.Id_Pedido > 0"><a>Pedido</a></li>
                            </ul>
                     </li>
                 </ul>
             </th>
   </tbody>