CODEWITHSUNDEEP
htmlcssinternet-explorerdrop-down-menu
justinlav
justinlav

Reputation: 155

Css dropdown navigation bar not working in IE

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.

Upvotes: 1

Views: 3624

Answers (1)

M.R
M.R

Reputation: 650

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;
}

Upvotes: 1

Related Questions