位置修正的網站菜單在Internet Explorer 9中未顯示

Question

我正在製作預覽網站，並且我注意到該網站未在IE9中顯示菜單。 我用Fullpage.js作爲基本模板並添加上。我建立菜單的fullpage.js文檔中建議：

<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：

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

的div被放置在正確的位置，但內容不會顯示IE9 。 我一直在盯着這幾個小時，我真的被卡住了。任何幫助將不勝感激。

這是測試網站的link。

Answer 1

看來你需要把Z-指數ul.menu和img.menuknop如下

ul.menu, .menuknop{z-index:99} 

這個我估計能夠解決您的問題。