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

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

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

Ответ 1

добавьте position:relative; в .alignRight и a right:1px; в .alignRight div

Ответ 2

Как насчет использования этого css?

li .alignRight {
  direction: rtl;
}

или

li:last-child {
  direction: rtl;
}

Ответ 3

Просто добавить position: relative; и right:1px (как было предложено @Thomas Menga) недостаточно, что приведет к выпаданию полного размера родительского элемента, то есть в этом случае будет кнопка, вы должны просто reset свойство left сначала до left: auto;, а затем установите свойство right, чтобы вы хотели right:1px;

Нет необходимости в других дополнительных материалах здесь: -)