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

Question

我做了一个简单的纯 CSS 下拉菜单，如下面的代码片段所示:

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

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

它将靠近页面右边缘右对齐。我想将列表项对齐到列表标题“转到...” 的右侧，如下图所示:

它应该随着左侧列表项的文本长度而增长。这将避免水平滚动，但我不知道我是如何实现的。请注意，如果需要，可以毫无问题地更改菜单 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>

希望这对您有所帮助!