html - z-index 在响应式菜单中不起作用

Question

我有两个单独的移动和桌面网站菜单。我为这个嵌套菜单添加了一个非常高的 z-index，但它仍然隐藏在其他元素后面并且没有显示在顶部。那么我们如何将其置于所有其他元素之上。 这是布局示例:

<nav id="responsive_main_menu">
<div id="navigate-to">Navigate to</div>
                        <ul id="menu-main-menu-1" class="menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home alpha"><a href="#"><span>Home</span></a></li>
</ul>                       

这是 CSS:

#responsive_main_menu .menu,#responsive_main_menu .menu ul {

z-index: 999999;
}

这是显示此问题的网址。将页面大小调整为较小版本以查看蓝色菜单。 http://daccordinc.com/

Answer 1

您需要应用默认值 static 以外的位置属性，以便更改元素的堆叠上下文。将相对定位添加到以下选择器:

#responsive_main_menu {
    position: relative;
    z-index: 999999;
}

http://img836.imageshack.us/img836/1389/wgyj.jpg