I have been searching for videos on coding, bootstrap, and CSS. I have tried everything but I still can't figure out which attribute to set for the drop-down list so that when it expands, the list item margin will align to the right of the parent item. Currently, it is aligned to the left by default. I want the drop-down list to look like this upon expansion: [1]: https://i.sstatic.net/Fu3AY.png][1]
Without adjusting the margin, my drop-down lists end up looking like this: all elements are aligned to the left of the parent menu. However, if I adjust the margin, the list loses responsiveness when the view size changes. [2]: https://i.sstatic.net/ks5q5.png[2]
Has anyone encountered the same issue and do you have any suggestions on how to resolve it? Here is a snippet of my list code:
<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>