使用CSS，如何更改点击打开UL菜单的对齐方式？

Question

我的页面顶部有以下非常基本的菜单栏：

左侧“汉堡包”菜单左侧对齐打开，宽度向右扩展。一切都很好：

然而，右边也与左边对齐，宽度向右扩展。这不是很好：

如何让右边的菜单靠右边缘，就像左边菜单靠左边缘一样？

我的HTML在下面。 css有点长（因此，here's a paste link）但很简单。

<div id='header'>
    <div id='headerContent'>
        <div id='breadcrumbs'>
            <div id='hamburger' class='headerMenu'>
                <i class='fa fa-bars'></i>
                <ul>
                    <li><a href='/'>Page</a></li>
                    <li><a href='/'>Whatever</a></li>
                    <li><a href='/'>Other stuff</a></li>
                </ul>
            </div> Title
        </div>
        <div id='login'>
            <div class='headerMenu'>
                <i class='fa fa-user-circle'></i>
                <ul>
                    <li><a href='/user/logout/'>Logout</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Answer 1

我觉得有一个容器用position: relative按住按钮和菜单并设置text-align: right，然后在菜单上使用right: 0将是正确的方法：

#header {
  background: lightblue;
}
.right {
  text-align: right;
  position: relative;
  width: 200px;
}
.popup {
  position: absolute;
  padding-left: 0;
  margin: 0;
  right: 0;
  background: lightgreen;
}

<div id="header">
  <div class="right">
    <a>Menu</a>
    <ul class="popup">
      Popup menu
    </ul>
  </div>
</div>

您应该能够以多种方式修改容器div（例如宽度，边距，display: inline-block等）而不会弄乱行为。