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的元素中。