css将向下对齐向右

Question

我正在使用此页面的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;
}

但这不起作用。

如何将下拉菜单“对齐”？

Answer 1

将position:relative;添加到.alignRight，将right:1px;添加到.alignRight div

Answer 2

如何使用此CSS？

li .alignRight {
  direction: rtl;
}

或

li:last-child {
  direction: rtl;
}

Answer 3

仅添加position: relative;和right:1px（由@Thomas Menga建议）是不够的，这将使下拉列表成为父元素的完整大小，即在这种情况下将是按钮，您必须先将左属性重置为left: auto;，然后将正确的属性设置为您想要的right:1px;

这里不需要其他额外的东西： - ）