Superfish 将不会在 IE8 中显示
我有一个 superfish 的问题,它使得下拉菜单根本不出现在仅 IE8 中。它出现在其他一切(甚至 IE6)中,但不出现在 IE8 中。我根本没有修改源 JS,我正在调用一个名为“subnav”的 div,在其中显示我的列表。
应该发生的是,当我将鼠标悬停在菜单项上时,它将下拉菜单的 CSS 更改为“可见性:可见,显示:阻止”并显示菜单。在 IE8 中,什么也没有发生,CSS 也没有发生任何改变。
有什么想法可能导致它吗?我还使用 superfish 的 supersubs 插件。
这是 css:
#navbar ul{
margin:10;
padding:0;
width:1000px;
}
#navbar li{
float:left;
color:#191919;
list-style-type:none;
text-transform:uppercase;
background:transparent url('../images/common/layout/nav-separator.jpg') center right no-repeat;
padding:10px 0;
}
#navbar li.last{
background:none;
}
#navbar ul li a{
padding: 12px 33px;
color: #fff;
text-decoration: none;
}
#navbar ul li a:hover{
color:#05af0d;
background:transparent url(../images/common/layout/nav-hover-highlight.png) top center no-repeat;
}
#navbar ul li a.hover-arrow:after{
margin-left:10px;
content:url(../images/common/nav-arrow.png);
}
#navbar ul li:hover a.hover-arrow:after{
margin-left:10px;
content:url(../images/common/nav-arrow-roll.png);
}
#navbar ul li a.hover-arrow:hover{
background:#000 url('../images/common/layout/nav-separator.jpg') right 9px no-repeat;
}
#navbar ul li p{
margin:0;
display:inline-block;
}
/*Sub Nav Lists */
.subnav {
display:none;
visibility:hidden;
}
#navbar ul li ul{
margin:0; padding:0;
position: absolute;
left: auto; top: 40px;
background: #333;
z-index: 99;
}
#navbar ul li ul li{
background:none;
}
#navbar ul li ul li a{
padding:0px 3px;
display:inline-block;
margin:0;
width:150px;
text-transform:capitalize;
}
#navbar ul li ul li a:hover{
background-color:#a7a7a7;
color:#000;
border:none;
background-image:none;
font-weight:bold;
}
这是页面上的情况:
<div id="navbar">
<ul class="topnav">
<li id="item 1"><p></p>
<ul class="subnav"></subnav>
</li>
<li id="item 2"><p></p>
<ul class="subnav"></subnav>
</li>
etc...
</ul>
</div>
I have an issue with superfish which makes the dropdown menu not appear at all in ONLY IE8. It shows up in everything else (even IE6) but not IE8. I didn't modify the source JS at all and I'm calling a div called "subnav" where my list is displayed.
What SHOULD happen is when I mouse-over the menu-item, it changes the dropdown menu's CSS to "visibility: visible, display:block" and displays the menu. In IE8, nothing happens and no CSS is changed at all.
Any ideas what could be causing it? I'm also using the supersubs plugin for superfish.
Here is the css:
#navbar ul{
margin:10;
padding:0;
width:1000px;
}
#navbar li{
float:left;
color:#191919;
list-style-type:none;
text-transform:uppercase;
background:transparent url('../images/common/layout/nav-separator.jpg') center right no-repeat;
padding:10px 0;
}
#navbar li.last{
background:none;
}
#navbar ul li a{
padding: 12px 33px;
color: #fff;
text-decoration: none;
}
#navbar ul li a:hover{
color:#05af0d;
background:transparent url(../images/common/layout/nav-hover-highlight.png) top center no-repeat;
}
#navbar ul li a.hover-arrow:after{
margin-left:10px;
content:url(../images/common/nav-arrow.png);
}
#navbar ul li:hover a.hover-arrow:after{
margin-left:10px;
content:url(../images/common/nav-arrow-roll.png);
}
#navbar ul li a.hover-arrow:hover{
background:#000 url('../images/common/layout/nav-separator.jpg') right 9px no-repeat;
}
#navbar ul li p{
margin:0;
display:inline-block;
}
/*Sub Nav Lists */
.subnav {
display:none;
visibility:hidden;
}
#navbar ul li ul{
margin:0; padding:0;
position: absolute;
left: auto; top: 40px;
background: #333;
z-index: 99;
}
#navbar ul li ul li{
background:none;
}
#navbar ul li ul li a{
padding:0px 3px;
display:inline-block;
margin:0;
width:150px;
text-transform:capitalize;
}
#navbar ul li ul li a:hover{
background-color:#a7a7a7;
color:#000;
border:none;
background-image:none;
font-weight:bold;
}
Here is how it's going on the page:
<div id="navbar">
<ul class="topnav">
<li id="item 1"><p></p>
<ul class="subnav"></subnav>
</li>
<li id="item 2"><p></p>
<ul class="subnav"></subnav>
</li>
etc...
</ul>
</div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
不确定这是否会解决您所看到的问题,但我注意到在您的 html 代码片段中,带有 subnav 类的 UL 元素没有用适当的标签关闭。我尝试的第一件事是将它们替换为:
IE8 可能不会像其他浏览器那样慷慨地处理任何其他错误。尝试通过验证器运行您的页面(即:W3C 标记验证器)
Not sure if this will address the problem you're seeing, but I noticed in your html snippet that the UL elements with the subnav class aren't being closed with an appropriate tag. First thing I'd try is replacing them with:
<ul class="subnav"></ul>
Any other errors may not be being handled by IE8 as graciously as other browsers. Try running your page through a validator (ie: The W3C Markup Validator)