CSS下拉菜單對齊不工作

我有一個只用CSS編寫的下拉菜單。它應該看起來像item | item | item | < - 頁角。但它現在獲得了它的下拉寬度。我附上的圖像，使其潔淨CSS下拉菜單對齊不工作

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/

感謝您的幫助！

來源

2013-06-20 MLL

添加到您的CSS

.icon-power{float:right;}

來源

2013-06-20 13:07:31

你可能需要設置一些寬度太 - 否則你的電源圖標將是下拉文本的寬度，我以爲你不不想要。使用'display：inline-block;' – jackweinbender

現在看起來像這樣：http://i.stack.imgur.com/a2jfH.jpg – MLL

我擺弄它：http://jsfiddle.net/m46F6/2/ – MLL

CSS下拉菜單對齊不工作

回答

相關問題