CSS下拉菜單不工作ie8和閃光關閉iPhone 5瀏覽器

Question

人類需要...我的CSS下拉菜單不會顯示在ie8和閃爍然後關閉iPhone 5瀏覽器（響應式設計）..使用代碼來自themeforest模板。這裏沒有進一步介紹代碼。

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

Answer 1

你的問題似乎是與行：

filter: alpha(opacity=0); 

爲了得到這個在IE8中工作，你需要包括線：

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

或者，完全刪除線似乎不會破壞任何東西。您可能需要使用不同的瀏覽器來查看發生了什麼。

有在IE8這裏不透明度進行更深入的討論：Opacity in web pages?

恐怕我幫不了你對事物的iPhone側。

也似乎有一個bug在你的代碼：

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

你#fff後，在最後一行缺少一個分號。使用W3C CSS Validator來幫助你捕捉這樣的錯誤。