我的中心水平下拉导航栏可在Safari，Chrome和Firefox中使用，但下拉菜单在IE中无效。我只能在IE8，IE9和IE10中进行测试，菜单中的任何一个都没有下拉菜单。菜单在那里并正确定位，但不会下拉。我已经搜索了很长时间寻找解决方案，但我找不到适合我的解决方案。
这是html：
<!doctype html>
<html>
<head>
<title>RIP | Reduce Irresponsible Plastic</title>
<link href="apes.css" rel="stylesheet" type="text/css">
<meta name="keywords" content="gilroy, ca, christopher, high, school, apes, environmental, science, environment, plastic"/>
<meta name="description" content="Reduce Irresponsible Plastic and the use of disposable plastic items in lunches."/>
<meta name="geo.region" content="US-CA" />
<meta name="geo.placename" content="Gilroy,CA" />
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="bag1.jpg"
var image2=new Image()
image2.src="bottle1.jpg"
//-->
</script>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.addEventListener) {
window.addEventListener('load', sfHover, false);
} else if (window.attachEvent) {
window.attachEvent('onload', sfHover);
}
//--><!]]>
</script>
</head>
<body background="webtreats_deep_water_blues_4 copy.jpg">
<div id="wrap">
<div id="header">
<div id="head">
<table border="1" width=1000px height=50px>
<td>
<img src="logp.png">
<p id="smaller"><font id="big">R</font><font id="text">educe </font><font id="big">I</font><font id="text">rresponsible </font><font id="big">P</font><font id="text1">lastic</font>
<p id="smaller2"><font id="top3"><i>Don't be a fool, reduce plastic at school</i></font>
</td>
</table>
</div>
</div>
<div style="width: 1000px;" onmouseover="document.getElementById('nav');">
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="#">History ▾</a>
<ul>
<li><a href="develop.html">How did it develop?</a></li>
<li><a href="firstid.html">First Identification</a></li>
<li><a href="facts.html">Facts</a></li>
</ul>
</li>
<li><a href="#">The Problem ▾</a>
<ul>
<li><a href="causes.html">Causes</a></li>
<li><a href="consequences.html">Consequences</a></li>
</ul>
</li>
<li><a href="#">Images ▾</a>
<ul>
<li><a href="graphs.html">Graphs</a></li>
<li><a href="maps.html">Maps</a></li>
<li><a href="pictures.html">Pictures</a></li>
</ul>
</li>
<li><a href="learn.html">Learn More</a></li>
</ul>
</div>
</div>
这是css：
#nav {
clear:both;
float:left;
width:100%;
margin:0;
padding:0;
position:relative;
z-index:1000000;
border-radius:10px;
background: #FFFFFF;
background: linear-gradient(top, #FFFFFF 0%, #87CEFF 50%);
background: -moz-linear-gradient(top, #FFFFFF 0%, #87CEFF 50%);
background: -webkit-linear-gradient(top, #FFFFFF 0%,#87CEFF 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#87CEFF');
}
#nav ul {
float:right;
list-style:none;
margin:0;
padding: 0;
position:relative;
z-index:9999;
right:50%;
text-align:center;
}
#nav ul li {
float:left;
margin:0 0 0 0px;
padding:0;
position:relative;
z-index:9999;
list-style:none;
left:50%;
top:1px;
width:160px;
}
#nav li ul {
position: absolute;
display: none;
}
#nav li:hover ul,
#nav li.sfhover ul,
a:hover#nav li ul {
display: block;
}
#nav ul li a {
display:block;
margin:0;
padding:.75em 0em .5em 0em;
color:#000;
text-decoration:none;
line-height:1em;
}
#nav ul li.active a {
color:#fff;
}
#nav ul li a:hover,
#nav ul li a.sfhover
{
background: #c5deea; /* Old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */
}
#nav ul li:hover a,
#nav ul li.hover a,
#nav ul li.sfhover a
{
color:#000;
font-weight:bold;
}
#nav ul ul {
display: none;
width:160px;
position:absolute;
top:auto;
left:0;
float:left;
right:auto;
}
#nav ul ul li {
left:auto;
margin:0;
clear:left;
float:left;
width:100%;
background: #FFFFFF;
background: linear-gradient(top, #FFFFFF 0%, #87CEFF 50%);
background: -moz-linear-gradient(top, #FFFFFF 0%, #87CEFF 50%);
background: -webkit-linear-gradient(top, #FFFFFF 0%,#87CEFF 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#87CEFF');
}
#nav ul ul li a,
#nav ul li.active li a,
#nav ul li:hover ul li a,
#nav ul li.hover ul li a,
#nav ul li.sfhover ul li a,
a:hover#nav ul li ul li
{
font-weight:normal;
line-height:2em;
float:left;
width:100%;
position:relative;
z-index:9999;
}
#nav ul ul li a:hover,
#nav ul li.active ul li a:hover,
#nav ul li:hover ul li a:hover,
#nav ul li.hover ul li a:hover,
#nav ul li.sfhover ul li a.sfhover,
#nav ul ul li a.sfhover
{
color:#fff;
float:left;
background: #c5deea; /* Old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */
position:relative;
z-index:9999;
}
#nav ul ul.last {
left:auto;
right:0;
}
#nav ul ul.last li {
float:right;
position:relative;
z-index:9999;
right:.8em;
}
#nav ul li:hover ul,
#nav ul li.hover ul,
li:hover#nav ul ul,
#nav ul li.sfhover ul
{
display:block;
}
#nav > li { /* used the child selector here to properly target your first level menu items */
position: relative;
z-index:9999;
float: left;
}
#nav li { /* used the child selector here to properly target your first level menu items */
position: relative;
z-index:9999;
float: left;
}
#nav li a {
display: block;
}
我已经尝试了一些javascript来解决这个问题，但它仍然存在并适用于除IE以外的所有浏览器。
答案 0 :(得分：0)
下载适用于IE 10，我只修改了IE的背景颜色，请检查：jsfiddle
CSS中的修改部分：
#nav ul li.active a {
color:#87CEFF;
}
#nav ul ul li {
left:auto;
margin:0;
clear:left;
float:left;
width:100%;
background: #FFFFFF;
background: linear-gradient(top, #FFFFFF 0%, #87CEFF 50%);
background: -moz-linear-gradient(top, #FFFFFF 0%, #87CEFF 50%);
background: -webkit-linear-gradient(top, #FFFFFF 0%,#87CEFF 50%);
background-color:#87CEFF;
}