html - 带有子菜单的菜单上的 Z 索引

Question

我正在尝试创建带有子菜单的菜单，这些子菜单动画从页面左侧滑动。但是无论我在子菜单中放置什么 z-index，都在我的内容之上。我把我的子菜单放在左边 150px 这样你就可以看到重叠。如果我将我的 sebmenu 放在 z-index -1 中，我会得到我想要的，但它不再是可点击的。这是一个活生生的例子 http://www.studioi.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/