試圖編寫一個jQuery-CSS下拉菜單。當用戶點擊菜單中的其他元素走動

它有點複雜，解釋（或者也許我只是感覺不連貫，因爲我無奈的），所以我已經做了的jsfiddle：http://jsfiddle.net/YmbMJ/試圖編寫一個jQuery-CSS下拉菜單。當用戶點擊菜單中的其他元素走動

結果部分如果您滾動所有然後點擊「USERNAME」一個菜單下拉菜單，但是當這個菜單下降時，我的導航中的兩個元素也隨之下降。我嘗試過使用CSS位置標籤和z-index，但仍然沒有運氣。任何和所有幫助表示讚賞

2011-12-29 Xecure

我沒有看到任何下拉菜單，當我點擊用戶名 – Kishore 2011-12-29 23:26:45

如果您將下拉菜單的position屬性設置爲absolute，它會將其從網頁的常規流程中移除，並且可以在導航欄上顯示。剛剛成立的#corner_menu元素像這樣的CSS：

#corner_menu { 
    position : absolute !important; 
    top  : 50px !important; 
    left  : 950px !important; 
}

這裏是一個演示：http://jsfiddle.net/YmbMJ/1/

我通常會使用right代替left由於元件位於頁面的右側，但在這種情況下，我不想改變任何更多的CSS，因爲它需要right才能正常工作。父元素（#header）需要將其position設置爲除static之外的其他值（如relative），並且還需要將其寬度更改爲到達頁面的兩側。

來源

2011-12-29 23:28:09 Jasper

謝謝，這有很大的幫助，但是當我改變角菜單的CSS它看起來好多了，但我仍然無法對齊彈出菜單隨用戶名一起上傳。我添加了一個頭部位置並將寬度更改爲100％。然後我將#corner_menu CSS右改爲0.但仍然有同樣的問題。參考：http：//jsfiddle.net/zakiaziz/YmbMJ/4/ 你可以進一步瞭解我必須做什麼嗎？ – Xecure 2011-12-30 01:59:08

你將不得不使用絕對不影響周圍的菜單

我認爲這將是圍繞以下div的，其他的div位置，但將概率需要有點過擺弄

#header ul{ 
    background-color: #CCCCCC; 
    border-radius: 5px 0 5px 5px; 
    float: right; 
    position: absolute; 
    right: 0; 
    top: 50px; 
    width: 150px; 
}

來源

2011-12-29 23:28:05

改變，確實解決了我的導航中最後2項移動的問題，但它也造成了菜單隨機彈出的問題。參考：http://jsfiddle.net/zakiaziz/YmbMJ/3/ – Xecure 2011-12-30 01:42:35

試圖編寫一個jQuery-CSS下拉菜單。當用戶點擊菜單中的其他元素走動

回答

相關問題