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

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

为.menu元素赋予right属性。

喜欢：

.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-container { position: relative; } .menu的位置与此相关。 完成后，只需添加.menu { right: 0; } .menu { right: 0; }使其向左扩展。

就像一个旁注：在CSS声明块中的最后一个声明之后，省略分号已被广泛认为是一种不好的做法（尽管有效）。

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

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