Why does only half the background show for sub menu links in IE?

[Razwanel]

For modern browsers I am using a CSS gradient on the menu hover-state background. The gradient filter in IE doesn't look so good, so I will be using a background-image taken from a screen shot in chrome. The problem I am having is that in IE only half of the element background is shown when a sub menu link is hovered, the bottom half is clipped. Using IE developer tools the element appears to have the proper height, but only half the background is shown.\[code\].main-navigation li ul li a { overflow: visible; font-family: 'HelveticaNeue', helvetica; font-size: 12px; background: rgba(220, 220, 220, 0.0); border-bottom: 1px solid rgba(0, 0, 0, 0.0); width: 178px; margin: 0px auto; height: 38px; line-height: 3.2em; color: #fefefe; text-transform: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none;} .main-navigation li ul li a:hover { background: #dddddd; /* Old browsers */ background: -moz-linear-gradient(top, #dddddd 0%, #545454 2%, #191919 95%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(2%,#545454), color-stop(95%,#191919)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #dddddd 0%,#545454 2%,#191919 95%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #dddddd 0%,#545454 2%,#191919 95%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #dddddd 0%,#545454 2%,#191919 95%); /* IE10+ */ background: linear-gradient(to bottom, #dddddd 0%,#545454 2%,#191919 95%); /* W3C */ filter: progidXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#191919',GradientType=0 ); /* IE6-9 */ border: none !important; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none; background-image: url('img/subhoverbg.png') !important; background-repeat: repeat;}\[/code\]