CSS下拉菜单（右）

Question

我想创建一个漂浮在右边的子菜单。但是，我撞到了一堵砖墙，只能将它浮在内部。

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

使用位置：绝对属性的子菜单。使用右边的 css属性可以正确定位子菜单。

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