Выпадающее меню 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%; 
    }