Pure CSS Drop-down Menu Not Displaying Properly in IE8 - css

Question

My pure css drop-down menu works in all major browsers except IE8. There are two issues.
1) The background color of menu doesn't display until the mouse rolls over one of the menu items. (see photo in link below)
http://www.searchtransparency.net/stackoverflow/2.jpg
2) If the menu is exited from the parent link (treatments) it leaves a shortened version of the background displaying. (see photo in link below)
http://www.searchtransparency.net/stackoverflow/1.PNG
CSS:
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
z-index:3;
}
.menu {
height: 53px;
width: 994px;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 38px;
padding-top: 15px;
}
.menu li a {
display: block;
padding-left: 44px;
padding-right: 44px;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0px;
margin-left: 0;
padding-top: 0;
padding-bottom: 0;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color:#CCC; }
.menu ul {
position: absolute;
top: 53px;
left: 0;
opacity: 0;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
-webkit-box-shadow: 0px 0px 5px 0px #333;
box-shadow: 0px 0px 5px 0px #333;
background-color: #222;
padding-bottom: 15px;
visibility: hidden;
behavior: url(PIE.htc);
}
.menu li:hover > ul {
opacity: 1;
visibility: visible;
}
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 25px;
overflow: visible;
}
.menu ul li a {
width: 175px;
margin: 0;
font-size: 12px;
text-shadow: none;
border: none;
padding-left: 25px;
height: 20px;
padding-top: 5px;
}
.menu ul li:last-child a { border: none; }
.menu li li:hover > a {
background-color: #666;
}
HTML:
<ul class="menu">
<li><img src="images/icon-home.png" alt="Home" width="18" height="18" border="0"></li>
<li>Meet The Doctor</li>
<li class="icon-dropdown-arrow">Treatments
<ul>
<li style="font-size:14px; padding-left:15px; padding-top:10px; margin-top:10px;">Skin Resurfacing</li>
<li>Fraxel® Restore</li>
<li style="font-size:14px; padding-left:15px; padding-top:10px; margin-top:0px;">Skin Tightening</li>
<li>Thermage®</li>
<li>Refirme® Photo-Rejuvenation</li>
<li style="font-size:14px; padding-left:15px; padding-top:10px; margin-top:0px;">Cellulite Treatments</li>
<li>LPG Lipomassage™</li>
<li>VelaShape™</li>
<li>Thermage®</li>
<li>Ionithermie Treatment</li>
<li style="font-size:14px; padding-left:15px; padding-top:10px; margin-top:0px;">Injectibles</li>
<li>Dermal Fillers</li>
<li>Botox® Cosmetic</li>
<li style="font-size:14px; padding-left:15px; padding-top:10px; margin-top:0px;">Other</li>
<li>Laser Hair Removal</li>
<li>Skin Treatments (Face & Body)</li>
<li>Skin Rejuvenation</li>
<li>Plastic Surgery</li>
<li>Massage</li>
</ul>
</li>
<li>Specials</li>
<li>Reviews</li>
<li>Contact</li>
</ul>
Code on JsFiddle.net

Answer 1

As i remember IE understand :hover only just for "a" tag.
:last-child doesn't support too, question about :last-child