Z-index on menu with submenus

Question

I'm tryng to crete menu with submenus who are animated to slide from left side of page. But whatever z-index I put my submenu is on top of my content. I put my submenu 150px left so you can see overlap. If I put my sebmenu in z-index -1 I get what I want but its not clickable any more. Here is a live example http://www.studioi.hr/index.php . Here is css for my nav

nav{
    position:fixed;
    z-index:100;
    width:250px;
    height:100%;
    background:#263b56;
    font-family: 'Oswald', sans-serif;
    color:#fff;
    text-align:center;
}

and css for my sub menu

nav ul#NavMeni ul.NavPodMeni{
    position:fixed;
    z-index:99;
    left:0;
    top:0;
    width:250px;
    height:100%;
    background:#2e4765;
    color:#fff;
    text-align:left;
}

and here is my whole nav code.

<nav>
    <ul id="NavJezici">
        <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="NavFollow">
        <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="NavLogo">
        <a href="#"><img src="/images/Logo.png"></a>
    </div>
    <div id="NavMeniBox">
        <ul id="NavMeni">
            <li><a href="/hr">Početna</a></li>
            <li><a href="#">Top Level Link</a>
                <ul class="NavPodMeni">
                    <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="NavPodMeni">
                    <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">Kalendar događanja</a></li>
            <li><a href="/it">Smještaj</a></li>
            <li><a href="/hr">Aktivni odmor</a></li>
            <li><a href="/en">Multimedija</a></li>
            <li><a href="/de">Info</a></li>
            <li><a href="/it">Kontakt</a></li>
        </ul>
    </div>
    <div id="NavInfo">
        <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> tzo.privlaka@zd.t-com.hr</p>
    </div>
</nav>

Answer 1

I tried with:

nav ul#NavMeni ul.NavPodMeni{
    position: -1;
}

… and I don't have problem on Chrome and Firefox to click submenu's items (when submenu is pushed on the right). So I think your problem may come from your browser.

Anyway, these 2 links may be useful to you:

• http://tympanus.net/Development/MultiLevelPushMenu/index.html
• http://multi-level-push-menu.make.rs/

Answer 2

Just follow the rules of the z-index stacking order.

• http://www.vanseodesign.com/css/css-stack-z-index/
• http://www.w3schools.com/cssref/pr_pos_z-index.asp