CSS Выпадающее меню выровнено не работает

Question

У меня есть выпадающее меню, написанное только в CSS. Он должен выглядеть как item | item | item | < - угол страницы. Но теперь он получает ширину раскрывающегося списка. Я прикрепить изображение, чтобы сделать его чистым:

http://i.stack.imgur.com/a1Esv.jpg

поэтому кнопка питания должна быть справа, и это выпадающий должно пойти налево.

Мой код (CSS):

span.topnavright { 
    color:white; 
    float: right; 
    vertical-align: middle; 
    padding-right: 0.7em; 
    padding-left: 0.7em; 
    display: table-cell; 
} 
span.topnavright:hover { 
    width: auto; 
    height: auto; 
    background: #464741; 
} 
div.menutop { 
    background: #464741; 
    color: white; 
    visibility: hidden; 
    right: 0px; 
    position: relative; 
    float: left; 
} 
span.topnavright:hover > div.menutop { 
    visibility: visible; 
    position: relative; 
} 

и мой HTML:

<span class="topnavright"> 
       <i class="icon-power"></i> 
       <div class="menutop"> 
        LOLOLO<br /> 
        kdsajfeiéfnédskvmdasévjdsaésvdasjdsf 
       </div> 
      </span> 
<span class="topnavright"> 
       haha 
      </span> 
<span class="topnavright"> 
       haha 
      </span> 

Моя скрипка: http://jsfiddle.net/m46F6/2/

Спасибо за любую помощь!

Answer 1

добавить к вашей CSS

.icon-power{float:right;}