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>

但我找不到一个解决方案来将子菜单与其父级的右边缘对齐,如下所示:

Answer 1

此菜单通过修改left属性实现隐藏/显示.您所需要的只是调整CSS规则来控制子菜单的show机制:

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

而不是将它对齐到左边,我们想要正确对齐,所以我们添加right:0;.但是,如果我们不触及左侧声明,菜单将被切断,因此left:0;我们不写,而是left:auto;让菜单扩展到它的固有宽度.为了适应父母的保证金li,我们添加与负保证金相同的金额,我们完成了:

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

你修改了小提琴

Answer 2

如果您将列表放在右侧，而不是将 UL 移出屏幕，您可以将显示属性从无切换到阻止，这样会更好更干净。

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

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

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

查看我更新的小提琴：http : //jsfiddle.net/V8aL6/2/