Css下拉导航栏在IE中​​不起作用

时间：2013-05-27 01:10:41

标签： html css internet-explorer drop-down-menu

我的中心水平下拉导航栏可在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 &#x25BE;</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 &#x25BE;</a>
                <ul>
                    <li><a href="causes.html">Causes</a></li>
                    <li><a href="consequences.html">Consequences</a></li>
                </ul>
            </li>
            <li><a href="#">Images &#x25BE;</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以外的所有浏览器。

1 个答案:

答案 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;
}
相关问题
最新问题