I recently incorporated a CSS/JavaScript drop-down menu on my website, which I sourced from the following page:
However, I am facing an issue with aligning the far-right drop-down properly. Specifically, I would like the items in the far-right drop-down to align to the right side when hovering over the "Contact" option. Currently, the "Email" item extends beyond the "Contact" box at the top, and I want it to take up space from the left if necessary. To illustrate this better, here is an image:
In an attempt to tackle this problem, I considered assigning the far-right elements a different class:
<li class="alignRight"><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Contact</a>
<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">E-mail</a>
<a href="#">Submit Request Form</a>
<a href="#">Call Center</a>
</div>
</li>
and styling it using CSS:
.alignRight {
float: right;
}
Unfortunately, this approach did not yield the desired result. So, I am seeking assistance on how to effectively align the drop-down menu to the right. Any suggestions?