Html CSS 下拉菜单，其子菜单与其父级的右边缘对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22519377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS dropdown menu with submenu aligning to the right edge of it's parent
提问by Alex Karshin
Here is a very easy example of CSS based dropdown menu: http://jsfiddle.net/V8aL6/
这是一个非常简单的基于 CSS 的下拉菜单示例：http: //jsfiddle.net/V8aL6/
<ul id="nav">
<li>
<a href="#" title="Return home">Home</a>
</li>
<li>
<a href="#" title="About the company">About</a>
<ul>
<li><a href="#">The product</a></li>
<li><a href="#">Meet the team</a></li>
</ul>
</li>
<li>
<a href="#" title="The services we offer">Services</a>
<ul>
<li><a href="#">Sevice one</a></li>
<li><a href="#">Sevice two</a></li>
<li><a href="#">Sevice three</a></li>
<li><a href="#">Sevice four</a></li>
</ul>
</li>
<li>
<a href="#" title="Our product range">Product</a>
<ul>
<li><a href="#">Small product (one)</a></li>
<li><a href="#">Small product (two)</a></li>
<li><a href="#">Small product (three)</a></li>
<li><a href="#">Small product (four)</a></li>
<li><a href="#">Big product (five)</a></li>
<li><a href="#">Big product (six)</a></li>
<li><a href="#">Big product (seven)</a></li>
<li><a href="#">Big product (eight)</a></li>
<li><a href="#">Enourmous product (nine)</a></li>
<li><a href="#">Enourmous product (ten)</a></li>
<li><a href="#">Enourmous product (eleven)</a></li>
</ul>
</li>
<li>
<a href="#" title="Get in touch with us">Contact</a>
<ul>
<li><a href="#">Out-of-hours</a></li>
<li><a href="#">Directions</a></li>
</ul>
</li>
</ul>
But I can't find a solution to align the submenu to the right edge of it's parent, like this:
但是我找不到将子菜单与其父项的右边缘对齐的解决方案，如下所示：
回答by Christoph
This menu achieves the hiding/showing by modifying the leftproperty. All you need is to adapt the CSS-rule which steers the show mechanism for the submenu:
该菜单通过修改left属性实现隐藏/显示。您所需要的只是调整控制子菜单显示机制的 CSS 规则：
#nav li:hover ul{
left:0;
}
instead of aligning it to the left, we want to align it right, so we add right:0;. However, if we do not touch the left declaration, the menu will get cut off, so instead of left:0;we write left:auto;to let the menu expand to it's intrinsic width. To accomodate for the margin of the parent li, we add the same amount as negative margin and we are done:
我们希望将其右对齐，而不是向左对齐，因此我们添加right:0;. 然而，如果我们不接触左边的声明，菜单将被切断，所以left:0;我们不是写left:auto;让菜单扩展到它的内在宽度。为了适应父级的保证金li，我们添加与负保证金相同的金额，我们就完成了：
#nav li:hover ul{
left:auto;
right:0;
margin-right:-10px;
}
回答by Maksim
Its better and more clean if you position your list to the right and instead of moving UL out of the screen you could just toggle the display property from none to block.
如果您将列表放在右侧，而不是将 UL 移出屏幕，您可以将显示属性从无切换到阻止，这样会更好更干净。
You will need to make some changes in these rules and add those properties:
您需要对这些规则进行一些更改并添加这些属性：
#nav li:hover ul {
display: block;
right: 0;
}
#nav ul {
display: none;
}
#nav ul li {
margin-right: 0;
}
See my updated fiddle: http://jsfiddle.net/V8aL6/2/
查看我更新的小提琴：http: //jsfiddle.net/V8aL6/2/
回答by Allwyn Dsouza
Add the Bootstrap class .pull-rightto <div class='btn-group'. Should look like below:
<div class='btn-group pull-right'
将 Bootstrap 类添加.pull-right到<div class='btn-group'. 应该如下所示：
<div class='btn-group pull-right'
回答by Sid Barat
A better solution should be:
更好的解决方案应该是：
#nav ul li ul, #nav ul li:hover ul {
float:right;
margin-right:2px; /*optional*/
}
回答by Collin Anderson
To automatically make dropdowns on the right align right:
要自动使右侧的下拉列表右对齐：
<script>
// make dropdowns on the right align right, etc, so they don't go off screen
var dropdown_uls = document.querySelectorAll('#nav li ul')
function fix_dropdowns(){
for (var i=0; i< dropdown_uls.length; i++) {
var ul = dropdown_uls[i]
var rect = ul.getBoundingClientRect()
var body = document.body.getBoundingClientRect()
if(rect.right > body.right){
ul.style.left = 'auto'
ul.style.right = 0
}
if(rect.left < body.left){
ul.style.left = 0
ul.style.right = 'auto'
}
}
}
fix_dropdowns()
addEventListener('resize', fix_dropdowns)
</script>
