Question

我有一个下拉菜单，如果第1级的最后一个菜单项有3级深度下拉子菜单，则第三级没有显示，因为所有子菜单都是从左到右显示。

我希望最后一个菜单项从右到左显示其子菜单项...我已搜索但找不到合适的答案。

我已经在jsfiddle中发布了示例代码，并且在{M-2}Level 1子菜单Level-2-1中，它有一个子菜单Level 3-1。我希望Level 3-1显示在Level-2-1的左侧。我的意思是它应该是向右而不是从左到右。

以下是HTML：

<div id="nav">
    <ul>
        <li>{M-1}Level 1
            <ul>
                <li>Level 2-1
                    <ul>
                        <li>Level 3-1</li>
                        <li>Level 3-2</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>{M-2}Level 1 
        <ul>
                <li>Level 2-1
                    <ul>
                        <li>Level 3-1</li>
                        <li>Level 3-2</li>
                    </ul>
                </li>
            </ul>
        </li>

    </ul>
</div>

和CSS：

#nav ul{
    margin:0;
    padding:0;
    list-style:none;
}
#nav ul li{
    margin:0;
    padding:10px 20px;
    position:relative;
    height:20px;
    line-height:20px;
    background-color:#EEE;
}
#nav > ul > li {
    float: left;
    height:30px;
    line-height:30px;
    background-color:#CCC;
}
#nav li > ul{
    visibility:hidden;
    width:200px;
    position: absolute;
    top:0px;
    left:200px;
    border-left:1px solid #000;
}
#nav > ul > li > ul{
    top:50px;
    left:0;
}
#nav li:hover{
    background-color:#999;
}
#nav li:hover > ul{
    visibility:visible;
}

这是jsfiddle http://jsfiddle.net/yb4aL/7/

Answer 1

有一个类似.leftAlign的类，只需将其插入任何你想要的地方，尽量不要过多地指定你的css，想想模块化。

Answer 2

#nav > ul > li > ul {
    top: 50px;
    left: 0px;
    text-align: right;
}

http://jsfiddle.net/yb4aL/10/

Answer 3

使用：last-child 伪类，您可以通过添加一条规则来解决此问题。

#nav > ul > li:last-child > ul > li > ul {
    left: auto;
    right: 100%;
}

Here's an updated jsfiddle

左对齐3标签深度下拉菜单中的最后一个菜单项

3 个答案: