CSS Dropdown menu align not working

Question

I have a dropdown menu written in only CSS. It should look like item|item|item| <- page corner. But it now gets the width of it's dropdown. I attach an image to make it clean:

https://i.sstatic.net/a1Esv.jpg

so the power button should be on the right and it's dropdown should go left.

My code(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;
}

ANd my 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>

My fiddle: http://jsfiddle.net/m46F6/2/

Thank you for any help!

Answer 1

add this to your css

.icon-power{float:right;}