IE9 (and IE8) drop down hover issues - drop-down-menu

Question

I have spent much time on research on this topic and I'm not finding a solution for my particular problem even though I have come across similar issues but their solutions don't seem to fit mine. The issue I"m having does not exist in any non-IE browsers. The main navigation of the site I'm building (#mainNav) when I hover over the main a link to view the drop down, the the focus of the link seems to only be on the actual text. So, when I try to move the mouse down the list it gets no further than the main link text before the hand turns back to an arrow and the menu disappears. This is a CSS3 menu that is working on another site successfully in all browsers and there doesn't appear to be any IE fixes, so I grabbed the code and decided to use it for this site. Everything went well until I checked it in IE :/
These are the areas that I looked at (that normally are the issue in cases such as this): display-block (exists on all "a" tags), removed margins and increased padding (didn't help), assigned a height value (didn't help), increased line-height (nope). I read in other blogs that not having a background color on the link could be an issues (nope), also read that using a transparent 1px image would do the trick (nope). When I say "nope" that's assuming I incorporated the fix correctly.
I appreciate the help very much!
Here is the CSS:
/* //////// MAIN NAVIGATION //////// */
/* Reset */
#navMain,
#navMain ul,
#navMain li,
#navMain a {
border:none;
font-weight:normal;
margin:0;
outline:none;
padding:0;
z-index:1000;
}
/* Menu */
#mainNav-wrap {
width:100%;
height:47px;
float:left;
background:#00aeef;
border-top:#014964 1px solid;
box-shadow: 0px 2px 2px #999999;
}
#navMain {
/*height:40px;*/
width:960px;
position:relative;
z-index:500;
margin:0 auto;
}
#navMain li {
display:block;
float:left;
height:40px;
list-style:none;
/*padding:40px 8px 0 4px;*/
position:relative;
text-transform:uppercase;
}
#navMain li li {
text-transform:capitalize;
}
/* Links */
#navMain li a {
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:#fff;
display:block;
font-size:18px;
line-height:18px;
font-family:'Raleway', sans-serif;
padding:15px 19px;
text-decoration:none;
text-shadow:0px 1px 1px rgba(0,0,0,.1);
transition:color .2s ease-in-out;
-webkit-transition:color .2s ease-in-out;
-moz-transition:color .2s ease-in-out;
-ms-transition:color .2s ease-in-out;
-o-transition:color .2s ease-in-out;
}
#navMain li:first-child a {border-left:none;}
#navMain li:last-child a{border-right:none;}
#navMain li:hover > a {background:#565454;color:#fff200;}
/* Sub Menu */
#navMain ul {
background: #565454;
border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
position:absolute;
left: 0;
top: 46px;
opacity: 0;
filter: alpha(opacity = 0);
transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-webkit-transition: opacity .25s ease .1s;
min-width:200px;
}
#navMain ul.electronics {
min-width:350px;
}
#navMain li:hover > ul {opacity:1;filter: alpha(opacity = 100);}
#navMain ul li {
height:0;
overflow:hidden;
padding:0;
transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-webkit-transition: height .25s ease .1s;
}
#navMain li:hover > ul li {height:38px;overflow:visible;padding:0;}
#navMain ul li a {
border:none;
color:#fff;display:block;
font-size:18px;
margin:4px 4px;
padding:8px 14px 8px 14px;
white-space:nowrap;
width:200px; /* Stretches Submenu */
}
#navMain ul li:last-child {margin-bottom:6px;}
#navMain ul li:last-child a {border:none;padding:4px 14px 1px 14px;}
#navMain ul li a:hover {background:none;}
#navMain ul li span {white-space:nowrap;}
.navMain_buffer {height:8px;}
/* ////////// MAIN CONTENT /////////// */
Here is the HTML:
<div id="mainNav-wrap">
<ul id="navMain">
<li>ELECTRONICS
<ul class="electronics">
<li>HDTVs 19"-32"</li>
<li>HDTVs 37" and Up</li>
<li>Gaming Systems</li>
<li>Home Theater</li>
<li>Stereos and Home Theater Systems</li>
<li>Digital Cameras and Camcorders</li>
<li>Small Electronics</li>
</ul>
</li>
<li>Computers
<ul>
<li>Laptops</li>
<li>Tablets</li>
<li>Desktops</li>
<li>Computer Desks</li>
</ul>
</li>
<li>APPLIANCES
<ul>
<li>Washer and Dryers</li>
<li>Refrigerators</li>
<li>Freezers</li>
<li>Ranges</li>
</ul>
</li>
<li>Bedrooms
<ul>
<li>Bedroom Sets</li>
<li>Kid's Bedrooms</li>
<li>Mattresses</li>
</ul>
</li>
<li>Dinning Rooms</li>
<li>Living Rooms
<ul>
<li>Recliners</li>
<li>Sectionals</li>
<li>Living Room Sets</li>
<li>Accessories</li>
</ul>
</li>
</ul>
</div><!-- /END main-nav-wrap -->

Answer 1

I have the answer! It turned out that the element needed a z-index of -1000. That was causing my problem. So this is what needed to be added in my css:
html {
position:relative;
z-index:-1000;
}