-1

I have a dropdown menu and if the the last menu item on level 1 has 3 level deep dropdown sub-menu then the third level didn't show up because all the sub-menu is displaying left to right .

I want the last menu item to be displayed its sub-menu item from right to left ... I have searched but couldn't find a suitable answer.

I have posted sample code in jsfiddle and in that fiddle the {M-2}Level 1 have sub-menu Level-2-1 and it has a sub-menu Level 3-1 . I want the Level 3-1 to be displayed in the left side of Level-2-1. I mean it should be right to left instead of left to right.

Here is the 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>

and the 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;
}

Here is the jsfiddle http://jsfiddle.net/yb4aL/7/

4

3 回答 3

0

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

于 2013-08-27T11:35:40.923 回答
0 
#nav > ul > li > ul {
    top: 50px;
    left: 0px;
    text-align: right;
}

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

于 2013-08-27T11:37:10.560 回答
0

使用:last-child伪类，您可以通过添加一条规则来实现这一目标。

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

这是一个更新的 jsfiddle。

于 2013-08-27T14:37:40.937 回答