Having an issue with dropdown showing in IE - css

Question

I'm not sure why this downdown menu won't show up in IE. Can anyone see what the problem is? It works in all the other browsers, just not IE. I know gradients in IE take a lot of thought. Here is my code.
.menu {
border: 1px solid #ccc;
background: #006699; /* Old browsers */
background: -moz-linear-gradient(top, #006699 0%, #1f416b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#006699), color-stop(100%,#1f416b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #006699 0%,#1f416b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #006699 0%,#1f416b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #006699 0%,#1f416b 100%); /* IE10+ */
background: linear-gradient(to bottom, #006699 0%,#1f416b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006699', endColorstr='#1f416b'); /* IE6-9 */
}
.menu li a {
padding: 15px 45px;
text-decoration: none;
font-size: 0.9em;
color: #fff;
font-family: Arial, sans-serif;
}
.menu li.current > a,
.menu li.current > a:hover,
.menu li.current.hover > a {
background: rgb(70,168,217); /* Old browsers */
background: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */
color: #fff;
text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
cursor: default;
}
.menu li a:hover,
.menu li.hover > a {
background: #b32416; /* Old browsers */
background: -moz-linear-gradient(top, #b32416 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b32416), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b32416 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b32416 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b32416 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(to bottom, #b32416 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b32416', endColorstr='#6d0019'); /* IE6-9 */
}

Answer 1

Which IE version?
I know that you need something like this in the head of your html page. Has to do with SVG or something. Conditional Formatting.
<!-- following class is conditional for IE9 and must be put in elements for css gradient to work -->
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
Then apply this gradient class to elements using the gradients.
http://www.colorzilla.com/gradient-editor/
EDIT
OK. Did a little research and found that the filter should have an 8 digit hex code where the first two are the opacity. I think FF for 100% and 00 for 0%. Also, use double quotes ". Might make a difference.
So do something like this:
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr="#ff7abcff",endColorstr="#ff4096ee",GradientType=0);