菜單下拉菜單需要高於內容，而不是將內容向下移動

好的，所以我對CSS真的很陌生，並且每天都在使用它來獲取所需的網站效果。我正在研究一個新的菜單，當li爲mouseover時，我正在使用預先配置的堆棧來顯示隱藏的內容。問題是我希望下拉菜單位於現有內容的頂部，而不是放下內容以顯示下拉菜單。我已經在一個完整的CSS菜單上實現了這一點，但這不適用於此菜單。我的下拉是這個;菜單下拉菜單需要高於內容，而不是將內容向下移動

.drop_6 { 
    width: 500px; 
    text-align:center; 
padding: 4px 10px 4px 10px; 
margin-right:30px; 
margin-top:7px; 
border:none;  
position: relative; 
top: -18px; 
right: -370px; 


/* Rounded Corners */ 
    -moz-border-radius: 0px 5px 5px 5px; 
    -webkit-border-radius: 0px 5px 5px 5px; 
border-radius: 0px 5px 5px 5px; 


/* Background color and gradients */ 

    background: #b5f0ff; 
background: -moz-linear-gradient(top, #b5f0ff, #009fc6); 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b5f0ff), to(#009fc6)); 
}

我試圖使這些absolute和主要內容relative，但是在這個堆棧jQuery的只是不喜歡，在所有的，和我沒有得到任何效果可言。這是一個鏈接到模型; http://testserver1.justrightwebdesign.com/

來源

2011-03-12 Chris Lowe

在css中查看the z-index property。

來源

2011-03-12 23:00:34 kristian

你的問題是你設置了overflow：隱藏到許多父元素。刪除這些，你至少應該看到一些效果。然後將position：absolute應用於drop_X Elements，並將它們移動到頂部和左側屬性的正確位置。您也可以刪除邊距，因爲您可以自由定位它們。

來源

2011-03-12 23:40:52 fabsn

擺脫overflow: hidden（.stacks_out，.stacks_top）。
添加position: absolute（.shell）
添加z-index: 1（.shell）

來源

2011-03-13 00:25:07

菜單下拉菜單需要高於內容，而不是將內容向下移動

回答

相關問題