Question

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

Answer 1

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

Answer 2

在css中查看the z-index property。

Answer 3

您的问题是您将overflow：hidden设置为许多父元素。删除那些，你至少应该看到一些效果。然后将position：absolute应用于drop_X元素，并使用top和left-attribues将它们移动到正确的位置。您也可以删除边距，因为您可以自由定位它们。

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

3 个答案: