CSS menu Déroulant (à droite)

Je suis en train de créer un sous-menu qui flotte à qui de droit. Cependant, j'ai frappé un mur de briques et ne pouvez l'obtenir qu'à flotteur sur la ligne.

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

Vous pouvez le voir ici (même si il est un peu plus large que la normale) que le sous menu s'affiche dans le parent de l'élément de liste. Si quelqu'un pouvait m'aider à l'obtenir flottant à droite, ce serait super!

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

OriginalL'auteur J Spring | 2013-06-26