z-index not working in responsive menu

Question

I have two separate menus for mobile and desktop sites.I have added a very high z-index to this nested menu but it still hides behind other elements and is not displayed at the top. So how do we make this at top of all other elements. Here is sample of layout:

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

Here is the CSS:

#responsive_main_menu .menu,#responsive_main_menu .menu ul {

z-index: 999999;
}

Here is the url showing this problem. Resize the page to smaller version to see the blue menu. http://daccordinc.com/

Answer 1

You need to apply a position property other than the default value, static in order to change the stacking context of an element. Add relative positioning to the below selector:

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

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

Answer 2

z-index won't work if you don't have any position declared

I added position: relative; there and see the difference now

Answer 3

z-index needs position to be different than static (which is the default) to work.
Try relative , it'll work:

#responsive_main_menu .menu, #responsive_main_menu .menu ul {
  z-index: 999999;
  position: relative;
}