html - CSS 下拉菜单(右侧)

Question

我正在尝试创建一个向右浮动的子菜单。但是，我碰壁了，只能让它内联 float 。

http://jsfiddle.net/jspring/yD9N4/

你可以在这里看到(虽然它比正常的宽一点)子菜单只显示在父列表项内。如果有人能帮助我让它向右漂浮，那就太好了!

<ul class="cl-menu">
    <li>Link 1
        <ul>
            <li><a href="#">Sub Link 1</a>
            </li>
            <li><a href="#">Sub Link 2</a>
            </li>
        </ul>
    </li>
    <li>Link 2
        <ul>
            <li><a href="#">Sub Link 1</a>
            </li>
            <li><a href="#">Sub Link 2</a>
            </li>
        </ul>
    </li>
</ul>

.cl-menu{
    list-style:none outside none;
    display:inline-table;
    position:relative;
    width:100%;
}
.cl-menu li{
    list-style:none outside none;
    border-bottom:1px solid #cccccc;
    padding:5px 1px;
    text-align:center;  

}
.cl-menu > li:hover{

    /*background-color:#303030;*/
    background-color:#66819C;
    color:#FFF;
    font-weight:bold;
    text-decoration:underline;
    opacity:1;
}

.cl-menu li ul{
    display:none;
}

.cl-menu li:hover ul{
    display:block;
    opacity:0.8;
    background-color:#FFF;
    margin-top:4px;
    font-weight:normal !important;
}

.cl-menu li ul li{
    border-bottom:1px solid #cccccc !important;
    border-top:none !important;
    border-left:none !important;
    border-right:none !important;
}

.cl-menu li ul li a{
    color:#000;
    text-decoration:none;
}

.cl-menu li ul li a:hover{
    color:#390;
    text-decoration:underline;
}

.cl-menu ul:after{
    content:"";
    clear:both;
    display:block;
}

Answer 1

对子菜单使用position:absolute 属性。使用 right css 属性正确定位子菜单。

    .cl-menu li ul
     { 
         display:none; 
         position:absolute;
         right:20%; 
     }