css to align drop down to the right

I am using the css/javascript drop-down menu from this page:

http://javascript-array.com/scripts/simple_drop_down_menu/

Though I would like to have the far-right drop-down aligning to the right: when you hover "Contact" that the "Email" item etc do not go further to the right than the "Contact" box at the top, and instead are taking space from the left side if required. Here is a picture to help clarify:

I thought of having the far-right of a different class which I would make:

<li class="alignRight"><a href="#" onmou开发者_JAVA百科seover="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>

with css:

.alignRight {
    float: right;
}

but that does not work.

How can I "align" the drop-down to the right?

add a position:relative; to .alignRight and a right:1px; to .alignRight div

How about using this css?

li .alignRight {
  direction: rtl;
}

or

li:last-child {
  direction: rtl;
}

Just adding a position: relative; and right:1px (as suggested by @Thomas Menga) is not enough, that will make the dropdown the full size of the parent element i.e. which in this case will be the button, you have to just reset the left property first to left: auto; and then set the right property to whatever you want right:1px;

No need for other extra stuff here :-)