Right alignment for the list

Question

I've looking for videos, coding, bootstrap, css.. I've been tried every thing but I still can't find out which attribute should I set for the drop down list so when it drops down, the list item margin will be aligned to the right of parent item. The default set for it is to the right. I want the drop down list when it drops will look like this: [1]: https://i.sstatic.net/Fu3AY.png][1]

Without adjusting the margin, my drop down lists look like this: All the element is aligned to the left of parent menu. But when I adjust the margin so the list will not be responsive when I change the view size. [2]: https://i.sstatic.net/ks5q5.png[2]

Is there any one meet the same status & do you have any suggestion for me to solve this out? My list codes:

<div class="menu">
    <button>Menu</button>
    <ul>
        <li><a href="#">MoonLight Ltd Co.</a></li>
        <li><a href="#">Introduction</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contacts</a></li>
    </ul>
</div>

Answer 1

Here the codes I set for the ul & li:

              .navbar-wrapper .right-side-wrapper ul {
                margin:0px;
                padding:0px;
                position: absolute;
                list-style: none;
                border-radius:3px;
                text-align: end;
                opacity: 0.5;
                pointer-events: none;
                transform: translateY(10px);
                transition: all 0.5s ease-in;
                background:rgba(255, 0, 0, 0.6);
                font-size: calc(8px + 0.5vw);

              }
              .navbar-wrapper .right-side-wrapper li {
                position:relative;
                width:calc(100px + 3vw);
                padding:1vh;
              }

Answer 2

I think you can use some ways.

ul {
    text-align: right;
}

or

ul {
    text-align-last: right;
}

or

li {
    float: right;
}

li {
    text-align: right;
}