Dropdown menu opens behind the next <div> - html

Question

This is my question about the dropdown menu which open behind the div.
Here is my HTML code:
<div style="position:relative; left:0px; top:0px;">
<div style="background-color: white; width: 100%;">
<div class="styled-select">
<select id="campaignListId" name="campaignId" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;" style="z-index:99999">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
<option value="5">Fifth</option>
<option value="6">Sixth</option>
<option value="7">Seventh</option>
<option value="8">Eighth</option>
<option value="9">Ninth</option>
<option value="10">Tenth</option>
</select>
</div>
<div style="background-color: grey; width: 100%; height:400px; left: 0px; ">
<div style="width: 944px; margin: 0 auto; ">
<font style="font-size: 22px; font-weight: bold; ">
<span id="spanMOV" style="cursor: pointer; color: #4F9DD0; text-decoration: underline; " >
Movies
</span>
<span id="spanGAM" style="cursor: pointer;" >
Games
</span>
<span id="spanRES" style="cursor: pointer;" >
Restaurant
</span>
</div>
</div>
</div>
</div>
And this is my CSS code:
<style type="text/css">
.styled-select select {
position: absolute;
background: transparent;
width: 944px;
padding: 5px;
font-size: 32px;
font-weight: bold;
font-family: 'PT Sans', sans-serif;
color: #4F9DD0;
line-height: 1;
border: 0;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
}
.styled-select {
overflow: hidden;
background: url(resources/img/campaignSelector.png) no-repeat right #ddd;
background-color: white;
width: 944px;
height: 48px;
position: relative;
margin: 0 auto;
}
The problem is that, whenever I click on the select dropdown, it opens behind the <div> after that. I had tried z-index but it did not work.

Answer 1

Remove the overflow: hidden; from .styled-select and it shows up infront of it. If you want it to have a white background then, you need to change background: transparent on .styled-select select to background: white.

Answer 2

Try after removing position:relative.
.styled-select {
overflow: hidden;
background: url(resources/img/campaignSelector.png) no-repeat right #ddd;
background-color: white;
width: 944px;
height: 48px;
/*position: relative; */
margin: 0 auto;
}
OR
.styled-select {
/*overflow: hidden;*/
background: url(resources/img/campaignSelector.png) no-repeat right #ddd;
background-color: white;
width: 944px;
height: 48px;
position: relative;
margin: 0 auto;
}
Its works for me.