更改下拉菜单列表的默认对齐方式

Question

我做了一个简单的仅限CSS的下拉菜单，如下面的代码段：

＆＃13;

＆＃13;

.menu-container {
  width: 60px;
  float: right;
  border: 1px solid #999
}

.menu-container .menu {
  display: none;
  list-style: none;
  position: absolute;
  min-width: 80px;
  margin: 0;
  padding: 0
}

.menu-container:hover .menu,
.menu-container .menu:hover {
  display: block
}

.menu-container .menu li {
  border: 1px solid #999;
  text-align: right
}

＆＃13;

<div class="menu-container">
  Go to...
  <ul class="menu">
    <li>
      <a href="#">Item #1</a>
    </li>
    <li>
      <a href="#">Item #2</a>
    </li>
    <li>
      <a href="#">Item #3</a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

它将右对齐靠近页面的右边缘。我想将列表项对齐到列表标题右侧＆＃34;转到...＆＃34; ，如下图所示：

它应该随着列表项的文本长度向左增长。这将避免水平滚动，但我无法弄清楚我是如何实现它的。请注意，如果需要，可以更改菜单html结构，没有任何问题。

任何帮助都将受到赞赏。

Answer 1

将right属性提供给.menu元素。

像：

.menu {
  right: 8px;
}

.menu-container {
  width: 60px;
  float: right;
  border: 1px solid #999
}

.menu-container .menu {
  display: none;
  list-style: none;
  position: absolute;
  min-width: 80px;
  margin: 0;
  padding: 0;
  right: 8px;
}

.menu-container:hover .menu,
.menu-container .menu:hover {
  display: block
}

.menu-container .menu li {
  border: 1px solid #999;
  text-align: right
}

<div class="menu-container">
  Go to...
  <ul class="menu">
    <li>
      <a href="#">Item #1</a>
    </li>
    <li>
      <a href="#">Item #2</a>
    </li>
    <li>
      <a href="#">Item #3</a>
    </li>
  </ul>
</div>

希望这有帮助！

Answer 2

首先（如果是这样的话）我建议你给.menu-container { position: relative; } .menu这样的.menu { right: 0; }位置。完成后，只需添加.menu-container { width: 60px; float: right; border: 1px solid #999; position: relative; } .menu-container .menu { display: none; list-style: none; position: absolute; min-width: 80px; margin: 0; padding: 0; right: 0; } .menu-container:hover .menu, .menu-container .menu:hover { display: block; } .menu-container .menu li { border: 1px solid #999; text-align: right; }即可使其向左增长。

正如旁注：广泛认为在CSS声明块中最后一次声明后省略分号是不好的做法（虽然有效）。

＆＃13;

＆＃13;

<div class="menu-container">
  Go to...
  <ul class="menu">
    <li>
      <a href="#">Item #1</a>
    </li>
    <li>
      <a href="#">Item #2</a>
    </li>
    <li>
      <a href="#">Item #3</a>
    </li>
  </ul>
</div>

＆＃13;

var title = dataInfo.getElementsByTagName('title')[0].innerText

＆＃13;

＆＃13;

＆＃13;