CSS - IE 7 z-index problem

Question

Good day to all. I have a dropdown menu (a div actually with display:none at onclick event on the searchbar it appears) placed inside a div with the following style:

background-image: url("/whatever.png");
height: 80px;
position: relative;
top: 60px;
width: 100%;

The div that appears (the dropdown) has:

background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid;
height: 185px;
left: 140px;
padding-top: 3px;
position: absolute;
top: 25px;
width: 134px;
z-index: 25;

Now... here is the problem (I had to hide some elements sorry about that also I can not provide an online copy sorry about that too):

The red line is a div on the same level as the container of the dropdown with style:

top: 140px;
width: 100%;

The blue bar (is a div placed inside 2 other divs with position: relative and float: left, nothing else) has:

background: url("blue.png") repeat scroll 0 0 #00FF00;
color: #FFFFFF;
float: left;
font-size: 12px;
font-weight: bold;
height: 22px;
margin-top: 20px;
padding-top: 5px;
position: relative;
text-align: center;
text-transform: uppercase;
width: 210px;

This only occurs on IE 7 and 6. Is ok on all other browsers. Any help would be appreciated.

Answer 1

Add z-index: 50; to the parent (container) div.