Css dropdown navigation bar not working in IE

Question

My centered horizontal drop down navigation bar is working in Safari, Chrome, and Firefox, but the drop down menu is not working in IE. I have only been able to test in IE8, IE9, and IE10 and the menu does not drop down in any of them. The menu is there and positioned correctly, but it does not drop down. I have searched for a long time looking for solutions, but I have not been able to find one that works for me.

Here is the 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>

Here is the 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; 
}

I have tried some javascript to solve the issue but it still persists and works in all browsers except for IE.

`window.attachEvent` does not cover all browsers - have a look at [this question](http://stackoverflow.com/questions/2657182/correct-usage-of-addeventlistener-attachevent) — Owlvark, May 27 '13 at 01:24
Thank you. I took a look at that question and I have made some changes, but it still is not working in IE. Could you perhaps elaborate and help me with the actual code to fix it? — justinlav, May 27 '13 at 02:05
I think you're right. Do you have any suggestions? I don't know how all of my styling tags affect other browsers except for the fact that it doesn't work in IE. — justinlav, May 27 '13 at 17:51
Actually, i think it's a z-index issue throwing everything off — justinlav, May 27 '13 at 18:03

score 1 · Accepted Answer · answered May 28 '13 at 06:06

1

Drop down works on IE 10, i just modified the background color for IE check this: jsfiddle

modified part in 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;
}

answered May 28 '13 at 06:06

M.R

610
2
10
34

Thank you! To everybody else with this issue, taking out filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#87CEFF'); did the trick. I guess IE just couldn't read the gradient and that was screwing up the navigation bar. – justinlav May 30 '13 at 23:15

Css dropdown navigation bar not working in IE

1 Answers1