IE中纯CSS下拉菜单缺少背景色

IE中纯CSS下拉菜单缺少背景色,css,Css,我最近为一个纯CSS的现有网站创建了一个新的下拉菜单。它的功能很好,唯一的问题是下拉菜单的背景色在Internet Explorer中不显示。它只是在internet explorer上显示为白色,当它应该是两种混合颜色的渐变色,而悬停在上面时则是另一种橙色。我不知道为什么会这样,也不知道问题出在哪里 以下是CSS: CSS .menu{ border:none; border:0px; margin:0px; padding:0px; height: 24px; width: 904px; f

我最近为一个纯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>


我打赌这可能是小而明显的,但任何帮助都将不胜感激。非常感谢。

根据您使用的Internet Explorer版本,添加:悬停到不支持的其他元素

Windows Internet Explorer 7及更高版本在符合标准的模式(strict!DOCTYPE)下,可以将:hover伪类应用于任何元素,而不仅仅是链接。如果伪类未专门应用于选择器中的元素,如A标记,则假定为通用(*)选择器。不加选择地使用:hover伪类会对页面性能产生负面影响


Internet explorer不支持CSS3渐变。相反,您必须使用IEs专有和可怕的
过滤器

.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 */
} 
您在IE中应用的5%到100%的不透明度渐变无法复制-至少不能仅使用渐变
过滤器

.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 */
}