html - 3 ラベルのディープ ドロップダウン メニューの最後のメニュー項目を左揃えにします

Question

ドロップダウン メニューがあり、レベル 1 の最後のメニュー項目に 3 レベルの深いドロップダウン サブメニューがある場合、すべてのサブメニューが左から右に表示されるため、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/です