CSS下拉菜单，子菜单对齐到父元素右边缘

Question

这是一个基于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>

但我找不到一种方法将子菜单与其父菜单的右侧对齐，就像这样：

- Kevin Kopf

Answer 1

通过修改left属性，该菜单实现了显示/隐藏。您需要做的就是调整控制子菜单显示机制的CSS规则：

这个菜单通过修改 left 属性来实现隐藏/显示。您只需要调整控制子菜单显示机制的 CSS 规则：

#nav li:hover ul{
    left:0;
}

我们希望将其向右对齐，而不是向左对齐，因此我们添加right:0;。但是，如果我们不改变左侧声明，菜单将被截断，所以我们使用left:auto;代替left:0;，让菜单展开到其固有宽度。为了适应父级li的边距，我们添加相同数量的负边距，并完成操作：

#nav li:hover ul{
    left:auto;
    right:0;
    margin-right:-10px;
}

您修改的fiddle

- Christoph

---

非常感谢，这个对我来说一点也不清楚，但是它解决了我在项目中的问题。 - cbuteau

Answer 2

如果您将列表放在右侧，而不是将UL移出屏幕，那么效果会更好、更干净。您可以将显示属性从none切换到block。

您需要对这些规则进行一些更改，并添加这些属性：

#nav li:hover ul {
    display: block;
    right: 0;
}

#nav ul {
    display: none;
}
#nav ul li {
    margin-right: 0;
}

请查看我的更新的JSFiddle代码示例：http://jsfiddle.net/V8aL6/2/

- Maksim

---

与仅更改位置相比，更改“display”属性存在可访问性问题。 - Christoph

Answer 3

将 Bootstrap 类 .pull-right 添加到 <div class='btn-group' 中。应该像下面这样： <div class='btn-group pull-right'

- Allwyn Dsouza

Answer 4

更好的解决方案应该是：

#nav ul li ul, #nav ul li:hover ul {
    float:right;
    margin-right:2px; /*optional*/
}

- Sid Barat

Answer 5

为了自动将下拉菜单右对齐：

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

- Collin Anderson

---

为什么要使用JavaScript，如果可以使用CSS呢？如果用户由于某些原因关闭了浏览器中的JavaScript，会发生什么情况？ - Kevin Kopf

我的菜单项如果屏幕宽度不够会自动换行，所以右边的项目可能会变成左边的项目，这种情况有更好的处理方式吗？ - Collin Anderson