CODEWITHSUNDEEP
jquerycss
Cathrine Rydning
Cathrine Rydning

Reputation: 27

jquery drop-down menu appears behind other divs

I have looked at similar questions but no luck fixing it. This is my problem: Drop down is going behind the div

Here is the jquery code:

<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>

Here are the css sections for the drop down and the box it is hiding behind:

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;
}

What I have tried: - Changing / redoing the z-index values. - removed opacity from the maincontent div.

Upvotes: 1

Views: 541

Answers (1)

j08691
j08691

Reputation: 207861

z-index only works on positioned elements. Add position:relative to the elements you need to control the z-index of.

Upvotes: 4

Related Questions