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

但是那并不起作用。

我该如何将下拉菜单“对齐”到右侧？

- Timothée HENRY

Answer 1

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

- Thomas Menga

Answer 2

如何使用这个 CSS？

li .alignRight {
  direction: rtl;
}

或者

li:last-child {
  direction: rtl;
}

- Timothy Lee Russell

Answer 3

仅仅添加position: relative;和right:1px（正如@Thomas Menga所建议的）是不够的，这将使下拉菜单成为父元素的完整大小，即在这种情况下将是按钮，您必须首先重置left属性为left: auto;，然后将right属性设置为您想要的任何值right:1px; 这里不需要其他额外的东西 :-)

- Hammad