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方面帮助你。

您的代码中似乎也有错误：

#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来帮助您捕获这样的错误。

CSS下拉菜单不适用于ie8并且在iPhone 5浏览器上闪烁关闭

1 个答案: