首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >网站菜单,位置固定,在9中未显示

网站菜单,位置固定,在9中未显示
EN

Stack Overflow用户
提问于 2014-03-27 17:58:55
回答 1查看 276关注 0票数 1

我正在制作一个预览网站,我注意到该网站没有显示IE9中的菜单。我使用Fullpage.js作为基本模板并添加到上面。我按照fullpage.js文档中的建议构建了菜单:

代码语言:javascript
运行
复制
<img class="menuknop" src="img/menuknop.png" alt="Menu button"/>
<ul class="menu">
<li data-menuanchor="Home" class="active"><a href=#Home>Home</a></li>
<li data-menuanchor="About"><a href=#About>About</a></li>
<li data-menuanchor="Concerts"><a href=#Concerts>Concerts</a></li>
<li data-menuanchor="Media"><a href=#Media>Media</a></li>
<li data-menuanchor="Contact"><a href=#Contact>Contact</a></li>
</ul>

并添加了以下css:

代码语言:javascript
运行
复制
.menuknop{
position: fixed;
top: 1%;
left:1%;
width: 50px;
height: auto;
}

.menu{
 position:fixed;
top:1.5%;
left: 80px;
height: 50px;
width: 100%;
padding: 0;
margin:0;
font-size: 1em;
overflow:hidden;
}
.menu li {
    display:inline-block;
    margin: 0px;
    color: #000;
    background:#fff;
    background: rgba(255,255,255, 0.5);
    -webkit-border-radius: 10px; 
            border-radius: 10px; 
}
.menu li.active{
    background:#666;
    background: rgba(0,0,0, 0.5);
    color: #fff;
}
.menu li a{
    text-decoration:none;
    color: #000;
}
.menu li.active a:hover{
    color: #000;
}
.menu li:hover{
    background: rgba(255,255,255, 0.8);
}
.menu li a,
.menu li.active a{
    padding: 9px 18px;
    display:block;
}
.menu li.active a{
    color: #fff;
}

divs被放置在正确的位置,但内容没有在IE9中显示。我已经盯着这个看了好几个小时了,我真的被困住了。任何帮助都将不胜感激。

这是一个到测试站点的链接

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-03-27 18:15:51

您似乎需要将z索引放在ul.menu和img.menuknop上,如下所示

代码语言:javascript
运行
复制
ul.menu, .menuknop{z-index:99}

我想这会解决你的问题。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22695601

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档