html - CSS 下拉菜单对齐不起作用

Question

我有一个只用 CSS 编写的下拉菜单。它应该看起来像 item|item|item| <- 页 Angular 。但它现在获得了下拉菜单的宽度。我附上一张图片以使其干净:

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>

我的 fiddle :http://jsfiddle.net/m46F6/2/

感谢您的帮助!

Answer 1

将此添加到您的 CSS 中

.icon-power{float:right;}