带子菜单的菜单上的Z-index

Question

我正在尝试使用动画从页面左侧滑动的子菜单创建菜单。 但无论z-index我把我的子菜单放在我的内容之上。 我把我的子菜单放150px，这样就可以看到重叠了。 如果我把我的sebmenu放在z-index -1中，我得到了我想要的东西，但它不再可以点击了。 这是一个实例http://www.applei.hr/index.php 。 这是我的导航的CSS

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

和我的子菜单的CSS

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

这是我的整个导航代码。

<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

我尝试过：

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

...我在Chrome和Firefox上没有问题来点击子菜单的项目（当右侧按下子菜单时）。 所以我认为您的问题可能来自您的浏览器。

无论如何，这两个链接可能对您有用：

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

Answer 2

只需遵循z-index堆叠顺序的规则即可。

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