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%; 
    }