jquery下拉菜单出现在其他div后面

Question

我看过类似的问题，但没有运气修复它。这是我的问题：

这是jquery代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document) .ready(function(){
$('li') .hover(function(){
$(this) .find('ul>li') .stop().fadeToggle(400);
}); 
});
</script>

以下是下拉列表的css部分及其隐藏的框：

ul li li
{
background:#50d7db;
color:#005263;
display:none;
z-index: 5000;
}



#maincontent
{
background:rgba(255,255,255,0.5);
opacity:100%;
float:left;
width:815px;
height:390px;
margin-left:15px;
z-index:-5000;
}

我尝试过： - 更改/重做z-index值。 - 从maincontent div中删除了不透明度。

Answer 1

z-index仅适用于定位元素。将position:relative添加到控制z-index。

所需的元素