Css для выравнивания вниз вправо

Я использую раскрывающееся меню css/javascript на этой странице:

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

Хотя я бы хотел, чтобы правое выпадающее выровнялось справа: когда вы наводите "Контакт", что элемент "Электронная почта" и т.д. не идет дальше, чем в поле "Контакт" вверху, и вместо этого занимают пространство с левой стороны, если это необходимо. Вот изображение, которое поможет уточнить:

Я думал о том, что у меня есть правый край от другого класса, который я бы сделал:

<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>

с помощью css:

.alignRight {
    float: right;
}

но это не работает.

Как я могу "выровнять" выпадающее меню вправо?

Ответы

li .alignRight {
  direction: rtl;
}

li:last-child {
  direction: rtl;
}