Dropdown hidden by parent div - html

Question

My navagation menu will work in IE8 but works in IE7,9,10. It appears that the #nav_wrap is hiding the the sub menu on hover (if I expand the height of the #nav_wrap i can see the sub menu on hover but only the amount added by the parent container height). I am lost at this point and have no idea how to resolve it since it works in all other IEs, Chrome, Safari and Moz. Any please have an idea???
HTML
<div id="nav_wrap">
<div id="nav">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu',) ); ?>
</div>
</div>
CSS
#nav_wrap {
height: 38px;
width: 100%;
margin: -20px auto;
position: absolute;
left: 0;
z-index: 400;
}
/*-- Nav --*/
#nav {
width: 648px;
height: 98%;
z-index: 10;
margin: 0px auto;
font-family: 'Marcellus SC', serif;
font-size: 16px;
letter-spacing: 1px;
font-style:italic;
z-index: 400;
background: #dc0000; /* Old browsers */
background: -moz-linear-gradient(top, #dc0000 0%, #650101 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dc0000), color-stop(100%,#650101)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dc0000 0%,#650101 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dc0000 0%,#650101 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #dc0000 0%,#650101 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc0000', endColorstr='#650101',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #dc0000 0%,#650101 100%); /* W3C */
}
#nav ul,
#nav li,
div.menu ul,
div.menu ul li,
ul.menu, ul.menu li {
list-style: none;
padding: 0;
margin: 0;
display: inline;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
display: block;
padding: 8px 12px;
margin: 1px;
font-size: 15px;
white-space: nowrap;
border-radius: 24px;
color: white;
-webkit-transition: color .3s ease-in-out;
-moz-transition: color .3s ease-in-out;
-o-transition: color .3s ease-in-out;
}
#nav ul li a:hover { color: #081b3d; }
#nav ul ul {
position: absolute;
top: -99999px;
left: 0;
opacity: 0; /* Hide sub level */
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
z-index: 1497;
background: #dc0000;
padding: 2px;
border: 1px solid #dc0000;
border-top: none;
box-shadow: #111 0 3px 14px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
#nav ul ul ul {
position: absolute;
top: -99999px;
left: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
border-radius: 6px;
border: 1px solid #dc0000;
}
#nav ul li:hover > ul {
opacity: 1;
position: absolute;
top: 99%;
left: 0;
z-index: 497;
}
#nav ul ul li:hover > ul {
position: absolute;
top: 0;
left: 100%;
opacity: 1;
z-index: 497;
background: #081b3d;
}
the site

Answer 1

For those who ever had this it was fixed by removing
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc0000', endColorstr='#650101',GradientType=0 ) !important; /* IE6-9 */
from all the nav containers. Not sure why.