CSS Drop down menu not working for ie8 and flashing shut on iPhone 5 browser

Question

Humans needed... My CSS drop down menu will not show up in ie8 and flashes then shuts on iPhone 5 browsers (responsive design)..using code from a themeforest template. without further adieu here is the code.

HTML

<div id="navigation">

<ul>
<li><a href="/index.htm">Home</a></li>

<li><a href="/about">About</a>
<ul>
<li><a href="/leadership">Leadership</a></li>
<li><a href="/giving">Giving</a></li>
<li><a href="/careers">Careers</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</li>

</ul>

</div>

CSS

/* Main Navigation

==========================*/

#navigation {
float: right;
}


#navigation ul, #navigation li {
list-style:none; 
padding:0; 
margin:0; 
display:inline;
}


#navigation ul li{
float:left;  
position:relative; 
}


#navigation ul li a { 
font-family: Arial, sans-serif;
display: inline-block;
color: #888;
padding: 40px 6px 10px 6px;
margin: 0 5px;
text-decoration: none;
font-size: 14px;
border-bottom: 3px solid transparent;
}


#navigation ul li a:hover{
border-bottom: 3px solid #555;
}


#navigation ul ul {
opacity: 0; 
margin: -3px 0 0 5px;
filter: alpha(opacity=0); 
position: absolute;
top:-99999px; 
left: 0;
background: #fff;
border: 1px solid #dddddd;
border-top: 3px solid #555;
z-index: 999;
}


#navigation ul ul li a:hover {
border-bottom: 1px solid #ddd;
}


#navigation ul ul li a {
padding: 8px 0;
display: block;
width: 130px;
margin: 0 16px;
font-family: Arial, sans-serif;
font-weight: normal;
font-size: 12px;
border-bottom: 1px solid #dddddd;
border-top: 1px solid transparent;
}



#navigation ul ul ul { 
position:absolute; 
top:-99999px; 
left:100%; 
opacity: 0;
margin: -3px 0 0 0;
z-index: 999;
}



#navigation ul ul ul li a { 
border-bottom: 1px solid #dddddd !important;
border-top: 1px solid transparent;
}



#navigation ul ul li:last-child a, #navigation ul ul li:last-child a:hover {
border-bottom: 1px solid transparent
}


#navigation ul ul ul li:last-child a {
border-bottom: 1px solid transparent !important
}


#navigation ul li:hover>ul{
opacity: 1; 
position:absolute; 
top:99%; 
left:0;
}


#navigation ul ul li:hover>ul{
position:absolute; 
top:0; left:100%; 
opacity: 1; 
z-index:497; 
background: #fff border: 0; 
}


#navigation ul li:hover > a {
color: #444;
}


#navigation ul ul li:hover > a {
border-top: 1px solid transparent; 
color: #444;
}


#current {
font-weight: bold !important; 
color: #444 !important; 
border-bottom: 3px solid #555 !important;
}

score 0 · Answer 1 · edited May 23 '17 at 11:49

Your problem appears to be with the line:

filter: alpha(opacity=0);

To get this to work in IE8, you need to include the line:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/

Alternatively, removing the line entirely doesn't seem to break anything. You might need to play around with different browsers and see what happens.

There's a more in-depth discussion on opacity in IE8 here: Opacity in web pages?

I'm afraid I can't help you on the iPhone side of things.

You also appear to have a bug in your code:

#navigation ul ul li:hover>ul{
  position:absolute; 
  top:0; left:100%; 
  opacity: 1; 
  z-index:497; 
  background: #fff border: 0; 
}

You're missing a semi colon after #fff on the last line. Use the W3C CSS Validator to help you trap bugs like this.

CSS Drop down menu not working for ie8 and flashing shut on iPhone 5 browser

1 Answers1