CSS下拉菜单，其子菜单与其父项的右边缘对齐 [英] CSS dropdown menu with submenu aligning to the right edge of it's parent

问题描述

以下是一个基于CSS的下拉菜单的非常简单的示例：

Here is a very easy example of CSS based dropdown menu: 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:

解决方案

This menu achieves the hiding/showing by modifying the left property. All you need is to adapt the CSS-rule which steers the show mechanism for the submenu:

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

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

you modified fiddle

这篇关于CSS下拉菜单，其子菜单与其父项的右边缘对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！