Website menu with position fixed not showing in Internet Explorer 9

Question

I was making a preview website and I noticed that the site wasn't displaying the menu in IE9. I used Fullpage.js as a basic template and added on. I build the menu as suggested in the fullpage.js documentation:

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

and added the following 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;
}

The divs are being placed at the correct position but the content is not displaying in IE9. I've been staring at this for hours and I'm really stuck. Any help would be greatly appreciated.

Here's a link to the test site.

Answer 1

It seems that you need to put z-index on ul.menu and img.menuknop as follows

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

this I guess will resolve your issue.