右对齐 CSS 下拉菜单的最后一个子菜单答案

【问题标题】：Right-align last submenu of a css drop-down menu右对齐 CSS 下拉菜单的最后一个子菜单
【发布时间】：2015-07-08 13:07:05
【问题描述】：

希望此 CSS 下拉菜单的最后一个子菜单右对齐：https://jsfiddle.net/mishka00/p6cyy5p7/。它当前右对齐（不正确）只是为了显示所需的最终结果。尝试了right:0 和left:auto 的各种组合，但无法弄清楚。

【问题讨论】：

标签： css drop-down-menu alignment

【解决方案1】：

见https://jsfiddle.net/sjmcpherso/b1pyqLpc/

#nav ul li:last-child ul {
  right:0px;left:auto;
  text-align:right;
  background:white;
}

加上位置：相对于父级

【讨论】：

【解决方案2】：

为#nav ul li添加position: relative
为#nav ul li:last-child ul添加right: 0;

#nav ul {
    padding:0;
    margin:0;
    list-style:none;
}
#nav ul li {
    float:left;
    border:1px solid #fff;
    margin:0 30px;
    position: relative;
}
#nav ul li a {
    display:block;
    padding:10px 6px;
    position:relative;
}
#nav ul li:hover {
    border-left:1px solid #E9E9E9;
    border-right:1px solid #E9E9E9;
    border-top:1px solid #E9E9E9;
}
#nav ul li ul {
    display:none;
}
#nav ul li:hover ul {
    display:block;
    position:absolute;
    z-index: 10;
    background:#fff;
    width:150px;
    border:0;
}
#nav ul li ul li {
    display:block;
    position:relative;
    border:none;
    float:none;
    margin:0;
    left:-1px;
}
#nav ul li ul li:hover {
    border:none;
    background:#F7F9FB;
}
#nav ul li ul li a {
    padding:10px;
    border:1px solid #E9E9E9;
}
#nav ul li:last-child ul {    
    right: 0;
    background:white;
}
#nav ul li:last-child ul li{
    left:1px;
}

<div id="nav">
    <ul>
        <li><a href="#">Menu1</a>

            <ul>
                <li><a href="menu.html">Item1</a>
                </li>
                <li><a href="menu.html">Item2</a>
                </li>
                <li><a href="menu.html">Item3</a>
                </li>
                <li><a href="menu.html">Item4</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Menu2</a>

            <ul>
                <li><a href="menu.html">Item1</a>
                </li>
                <li><a href="menu.html">Item2</a>
                </li>
                <li><a href="menu.html">Item3</a>
                </li>
                <li><a href="menu.html">Item4</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Menu3</a>

            <ul>
                <li><a href="menu.html">Item1</a>
                </li>
                <li><a href="menu.html">Item2</a>
                </li>
                <li><a href="menu.html">Item3</a>
                </li>
                <li><a href="menu.html">Item4</a>
                </li>
            </ul>
        </li>
    </ul>
</div>
<div style='clear: both;margin-bottom:5px;'></div>
<div style='border-top:1px solid navy;'></div>

【讨论】：

【解决方案3】：

只需将此代码添加到您的 css 中

#nav ul li:last-of-type {
    float: right;
}

【讨论】：