I'm trying to create a menu with animated submenus that slide in from the left side of the page. However, no matter what z-index I assign to my submenu, it always appears on top of my content. I positioned my submenu 150px to the left to show the overlap. When I set the z-index of my submenu to -1, it behaves as expected but becomes unclickable. You can see an example live at . Here is the CSS for my main navigation:
nav{
position:fixed;
z-index:100;
width:250px;
height:100%;
background:#263b56;
font-family: 'Oswald', sans-serif;
color:#fff;
text-align:center;
}
And here is the CSS for my submenu:
nav ul#NavMenu ul.NavSubMenu{
position:fixed;
z-index:99;
left:0;
top:0;
width:250px;
height:100%;
background:#2e4765;
color:#fff;
text-align:left;
}
Below is the entire code snippet for my navigation:
<nav>
<ul id="LangNav">
<li><a href="/hr">HR</a></li>
<li><a href="/en">EN</a></li>
<li><a href="/de">DE</a></li>
<li><a href="/it">IT</a></li>
</ul>
<ul id="SocialNav">
<li><a href="/hr"><i class="fa fa-facebook"></i></a></li>
<li><a href="/it"><i class="fa fa-twitter"></i></a></li>
</ul>
<div id="LogoNav">
<a href="#"><img src="/images/Logo.png"></a>
</div>
<div id="MenuNavBox">
<ul id="MenuNav">
<li><a href="/hr">Home</a></li>
<li><a href="#">Top Level Link</a>
<ul class="NavSubMenu">
<div><i class="fa fa-chevron-left"></i><p class="clear"></p></div>
<h1>Privlaka</h1>
<li><a href="#">Second Level Link</a></li>
<li><a href="#">Second Level Link Level Link Level Link</a></li>
<li><a href="#">Second Level Link</a></li>
</ul></li>
<li><a href="/en">Privlaka</a>
<ul class="NavSubMenu">
<div><i class="fa fa-chevron-left"></i><p class="clear"></p></div>
<h1>Nin</h1>
<li><a href="#">Second Level Link</a></li>
<li><a href="#">Second Level Link Level Link Level Link</a></li>
<li><a href="#">Second Level Link</a></li>
</ul></li>
<li><a href="/de">Event Calendar</a></li>
<li><a href="/it">Accommodation</a></li>
<li><a href="/hr">Active Holidays</a></li>
<li><a href="/en">Media</a></li>
<li><a href="/de">Info</a></li>
<li><a href="/it">Contact</a></li>
</ul>
</div>
<div id="InfoNav">
<p><i class="fa fa-mobile" style="font-size:35px;"></i> +385 (0)23 367 468</p>
<p><i class="fa fa-envelope-o" style="font-size:25px;"></i> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e5a5441005e5c4758424f454f6e544a005a034d414300465c">[email protected]</a></p>
</div>
</nav>