菜单下拉菜单需要高于内容，而不是将内容向下移动

好的，所以我对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

菜单下拉菜单需要高于内容，而不是将内容向下移动

回答

相关问题