Question

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="#" 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>

with css:

.alignRight {
    float: right;
}

but that does not work.

How can I “align” the drop-down to the right?

Answer 1

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