css drop down z-index issue in ie7 only - css

Question

For some reason the z-index is not working properly in ie7 only. If I remove position:fixed from #header it works fine, however, as this menu is to be fixed at the top of the page this is needed. The drop down shows, but only over the bottom border and nothing below that. Can't figure this one out.
fiddle
<!-- start fixed header container -->
<div id="header_container">
<!-- start header -->
<div id="header">
<!-- start container -->
<nav>
<div class="container">
<div id="logo">logo here</div>
<div id="top_menu">
<ul>
<li>Features
<div class="drop">
<div>
<ul>
<li class="title">heading with link</li>
<li>testing 1</li>
<li>testing 2</li>
<li>testing 3</li>
</ul>
<ul>
<li class="title">and another heading</li>
<li>testing 1</li>
<li>testing 2</li>
<li>testing 3</li>
</ul>
</div>
<div class="extra">
<ul>
<li class="title">heading with NO link</li>
<li>testing 4</li>
<li>testing 5</li>
<li>testing 6</li>
</ul>
<ul>
<li class="title">plain info description goes as far as I want <br />with no link blah blah blah blah blah</li>
</ul>
</div>
</div>
</li>
<li>Download</li>
<li>Purchase</li>
<li>Support
<div class="drop">
<div>
<ul>
<li class="title">How can we help you?</li>
<li>FAQs</li>
<li>How To Guides</li>
<li>Online Documentation</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</li>
<li>Account Login</li>
</ul>
</div>
</div>
</nav>
<!-- end container -->
<div class="header_shadow"></div>
</div>
<!-- end header -->
</div>
<!-- end header container -->
#header_container{
width:100%;
height:52px;
}
#header{
width:100%;
height:50px;
position:fixed;
border-bottom:2px #3c9ac4 solid;
background: #00457b;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1e70b2), to(#00457b));
background-image: -webkit-linear-gradient(top, #1e70b2, #00457b);
background-image: -moz-linear-gradient(top, #1e70b2, #00457b);
background-image: -ms-linear-gradient(top, #1e70b2, #00457b);
background-image: -o-linear-gradient(top, #1e70b2, #00457b);
background-image: linear-gradient(top, #1e70b2, #00457b);
}
.ie8 #header, .ie9 #header{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e70b2', endColorstr='#00457b',GradientType=0 ) ;
}
.header_shadow{
width:100%;
height:10px;
position:absolute;
z-index:900;
display:none;
left:0;
top:52px;
background:url(/images/header_shadow.png) repeat-x;
}
/* Top Menu
================================================== */
#logo{
width:200px;
float:left;
}
/*menu container centered*/
#top_menu{
width:760px;
float:left;
}
/*entire menu ul*/
#top_menu ul{
position:relative;
z-index:1000;
margin:0;
float:right;
height:50px;
line-height:50px;
}
/*top link container*/
#top_menu ul li{
display:block;
float:left;
}
/*top link*/
#top_menu ul li a{
display:block;
color:#f1f1f1;
text-decoration:none;
padding:0 20px;
font-size:14px;
}
/*top link hover*/
#top_menu ul li:hover > a{
color: #f1f1f1;
background:#555555;
}
/*show dropdown and position under tab*/
#top_menu ul li:hover > .drop{
display:block;
top:auto;
}
/*drop down container*/
#top_menu ul li .drop{
position:absolute;
z-index:1000;
display:none;
padding:15px 0 0 0;
-moz-border-radius:0 0 8px 8px;
-webkit-border-radius:0 0 8px 8px;
border-radius:0 0 8px 8px;
background:#555555;
background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#202020));
background-image: -webkit-linear-gradient(top, #555555, #202020);
background-image: -moz-linear-gradient(top, #555555, #202020);
background-image: -ms-linear-gradient(top, #555555, #202020);
background-image: -o-linear-gradient(top, #555555, #202020);
background-image: linear-gradient(top, #555555, #202020);
font-size:13px;
}
.ie8 #top_menu ul li .drop{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#202020',GradientType=0 ) ;
}
.ie9 #top_menu ul li .drop{
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1ODIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiM1NTU1NTUiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMyMDIwMjAiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODIpIiAvPgo8L3N2Zz4=);
}
/*drop down div*/
#top_menu ul li .drop div{
float:left;
padding:0 30px 0 10px;
line-height:normal;
}
/*drop down div floated left*/
#top_menu ul li .drop div.extra{
/*border-left:1px #eeeeee solid;*/
}
#top_menu ul li .drop div .title, #top_menu ul li .drop div .title a{
padding:0 0 4px 0;
border:none;
color:#f1f1f1;
font-size:13px;
}
#top_menu ul li .drop div .title a:hover{
text-decoration:underline;
}
#top_menu ul li .drop div ul{
width:auto;
height:auto;
float:none;
background:none;
border:none;
margin:0 0 15px 0;
}
#top_menu ul li .drop div ul li{
float:none;
padding:1px 0 1px 0;
line-height:normal;
}
#top_menu ul li .drop div ul li:hover a{
background:none;
}
#top_menu ul li .drop div ul li a{
display:inline;
padding:0;
border:none;
color:#6cc5d8;
font-size:13px;
}
#top_menu ul li .drop div ul li a:hover{
text-decoration:underline;
}

Answer 1

I was able to solve the issue by adding yet another wrapper wound the header and making it position fixed. So it goes as container the width/height (to keep spacing of the rest of the page correct), container width/height fixed, then header container with logo/drop-down within that. Solves the problem in ie7 and every other browser worked fine before.