Цвета фона отсутствуют в чистом раскрывающемся меню CSS в IE

Question

Я недавно создал новое выпадающее меню для существующего веб-сайта исключительно с помощью CSS. Функционально работает нормально, единственное, что цвет фона выпадающего меню не отображается в Internet Explorer. Он просто выглядит белым в Internet Explorer, когда он должен быть градиентом двух смешанных цветов и другого оранжевого цвета при наведении курсора. Я не могу понять, почему это или где проблема может быть.

Вот CSS:

CSS

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
height: 24px;
width: 904px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

.menu ul{
background-color:#ffffff;
height:35px;
list-style:none;
margin:0px auto;
padding:0;
}

.menu li{
    float:left;
    padding:0px;
    margin: 0px 10px;
    }

.menu li a{
background:#ffffff;
color:#333;
display:block;
font-weight: 500;
line-height:20px;
margin:0px;
padding:0px 40px;
text-align:center;
text-decoration:none;
border: 1px #FFF solid;
    }

    .menu li a:hover, .menu ul li:hover a{
color:#000;
text-decoration:none;
border: 1px #666666 solid;
        }

.menu li ul{
    background-color:#ffffff;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
    }

.menu li:hover ul{
    display:block;

    }
.menu li li {
    background:bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:220px;
    }

.menu li:hover li a{

    }

.menu li ul a{
    display:block;
    height:24px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fae4bd), color-stop(1, #eac380) );
    background:-moz-linear-gradient( center top, #fae4bd 5%, #eac380 100% );
    } 

    .menu li ul a:hover, .menu li ul li:hover a{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #FC6), color-stop(1, #F93) );
background:-moz-linear-gradient( center top, #F93 5%, #F90 100% ); 
border:1px solid #333;
color:#ffffff;
text-decoration: none;
        }

.menu p{
    clear:left;}

HTML

<div class="menu">
<ul>
    <li><a href="index.html" target="_self" >HOME</a></li>
    <li><a href="" target="_self" >CLIENT SECTION</a>
        <ul>
        <li><a href="clientsinformation.htm" target="_self">CLIENT INFORMATION</a></li>
        <li><a href="temporarystaff.htm" target="_self">TEMPORARY STAFF</a></li>
        <li><a href="permanentstaff.htm" target="_self">PERMANENT STAFF</a></li>
        </ul>
    </li>
    <li><a href="" target="_self" >APPLICATIONS</a>
        <ul>
        <li><a href="applicantinfo.htm" target="_self">APPLICANT INFORMATION</a></li>
        <li><a href="interviewtechniques.htm" target="_self">INTERVIEW TECHNIQUES</a></li>
        <li><a href="cvtips.htm" target="_self">CV TIPS</a>
        </ul>
    </li>
    <li><a href="praca.htm" target="_self" >WHY US?</a></li>
    <li><a href="contact.htm" target="_self" >CONTACT US</a></li>
</ul>

Могу поспорить, что это, вероятно, маленький и очевидный, но любая помощь будет принята с благодарностью. Большое спасибо.

Answer 1

Internet Explorer не поддерживает CSS3 градиенты. Вместо этого вы должны использовать собственные и ужасные IE filter.

.menu li ul a {
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fae4bd), color-stop(1, #eac380) );
    background:-moz-linear-gradient( center top, #fae4bd 5%, #eac380 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fae4bd', endColorstr='#eac380'); /* for IE */
} 

Применяемый там градиент непрозрачности от 5% до 100% не может быть воспроизведен в IE - по крайней мере, с использованием только градиента filter.

Answer 2

В зависимости от того, какую версию Internet Explorer вы используете, добавив: hover к другим элементам, которые не поддерживаются.

Windows Internet Explorer 7 и более поздних версий в режиме, соответствующем стандартам (строго! DOCTYPE), может применять псевдокласс: hover к любому элементу, а не только к ссылкам.Если псевдокласс не применяется конкретно к элементу в селекторе, таком как тег A, предполагается универсальный (*) селектор.Неизбирательное использование псевдокласса: hover может отрицательно повлиять на производительность страницы.

http://msdn.microsoft.com/library/ms530766.aspx