css ie8 animation,animation - CSS in IE8 not working - Stack Overflow

This is doing my head in, please can someone help? I have made a site, works in Ie9 + 10 and all other browsers, but the animated menu doesnt work in IE8 and there are people using that to view the site..

here is the css:

.menu, .menu ul, .menu li, .menu a {

margin: 0;

padding: 0;

border: none;

outline: none;

}

.menu {

height: 40px;

width: 800px;

background: #f7d000;

background: -webkit-linear-gradient(top, #f7d000 0%,#f7d000 100%);

background: -moz-linear-gradient(top, #f7d000 0%,#f7d000100%);

background: -o-linear-gradient(top, #f7d000 0%,#f7d000 100%);

background: -ms-linear-gradient(top, #f7d000 0%,#f7d000 100%);

background: linear-gradient(top, #f7d000 0%,#f7d000 100%);

-webkit-border-radius: 0px;

-moz-border-radius: 0px;

border-radius: 0px;

}

.menu li {

position: relative;

list-style: none;

float: left;

display: block;

height: 50px;

}

.menu li a {

display: block;

padding: 0 14px;

margin: 5px 0;

line-height: 28px;

text-decoration: none;

font-family: 'Titillium Web', sans-serif;

font-weight: bold;

font-size: 15px;

color: #000000;

-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;

}

.menu li:first-child a {

border-left: none;

}

.menu li:last-child a {

border-right: none;

}

.menu li:hover > a {

color: #ffffff;

}

.menu ul {

position: absolute;

top: 40px;

left: 0;

z-index: 999;

opacity: 0;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

background: #f7d000;

-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;

}

.menu li:hover > ul {

opacity: 1;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

}

.menu ul li {

height: 0;

overflow: visible;

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: 36px;

overflow: visible;

padding: 0;

}

.menu ul li a {

width: 180px;

padding: 8px 10px;

margin: 0;

border: none;

border-bottom: 1px solid #f7d000;

}

.menu ul li:last-child a {

border: none;

}

The site is: www.softwaretestingawards.com any help would be appreciated!