CSS-Dropdown-Menü (rechts)

Question

Ich versuche ein Untermenü zu erstellen, das auf der rechten Seite eingeblendet wird. Ich habe jedoch eine Ziegelmauer getroffen und kann es nur inline schweben lassen.

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

Sie können hier sehen (obwohl es ein bisschen breiter als normal ist), dass das Untermenü nur das Element übergeordnete Liste zeigt nach innen. Wenn jemand mir helfen könnte, es nach rechts zu treiben, wäre das großartig!

<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

Verwendung position: absolute Eigenschaft für Untermenü. Verwenden Sie rechts CSS-Eigenschaft für die Positionierung des Untermenüs ordnungsgemäß.

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