-2

人类需要...我的 CSS 下拉菜单不会显示在 ie8 中，然后在 iPhone 5 浏览器（响应式设计）上闪烁然后关闭...使用来自主题森林模板的代码。没有进一步的告别这里是代码。

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

1 回答 1

0

您的问题似乎与该行有关：

filter: alpha(opacity=0);

要让它在 IE8 中工作，您需要包含以下行：

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

或者，完全删除这条线似乎不会破坏任何东西。您可能需要使用不同的浏览器，看看会发生什么。

这里有关于 IE8 中不透明度的更深入讨论：网页中的不透明度？

恐怕我无法在 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来帮助您捕获此类错误。

于 2013-03-06T17:04:31.020 回答