Internet Explorer 9에서 위치가 고정되어 있지 않은 웹 사이트 메뉴

Question

미리보기 웹 사이트를 만들고 있었는데 사이트가 IE9에 메뉴를 표시하지 않는 것으로 나타났습니다. 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에 표시되지 않는 fullpage.js 문서에서 제안 나는 메뉴를 구축 . 나는 이것을 몇 시간 꼼짝 않고 바라보고 있었고 정말 고생했다. 어떤 도움이라도 대단히 감사하겠습니다.

테스트 사이트에 link입니다.

Answer 1

내가 추측이이 문제를 해결할 수

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

을 다음과 같이 ul.menu 및 img.menuknop에 Z- 인덱스를 둘 필요가 보인다.