CSS-始终位于菜单顶部

Question

I am creating a menu with an overlay. It worked during the early stages, but now I have an unusual problem. I've created the overlay and menu, but the overlay is always on top, no matter what value I set its z-index.

I plan to create a menu that will open a submenu on hover, after which the overlay must be shown so that only menu and submenu items are visible on screen.

Here is a demo: http://jsbin.com/wobopagamu/edit?html,css,output

.left_menu, .left_menu_sub_panel, .left_menu_sub_panel_list {
    list-style: none;
    -webkit-padding-start: 0px;
    padding: 0px;
    margin-left: 0px !important;
}

.left_menu_wrap {
    position: relative;
}

.left_menu {
    z-index: 2000;
}

.left_menu_sub_panel {
    background-color: white;    
    border: 1px #000 solid;
    position: absolute;
    top: 0px;
    left: 226px;
    padding: 30px;
    /*min-width: 400px;*/
    white-space: nowrap;
}


.left_menu > li {
    border-top: 0px;
    border-left: 2px #cd0000 solid;
    border-bottom: 1px #ddd solid;
    border-right: 1px #ddd solid;
    padding: 10px;
    cursor: pointer;
    max-width: 200px;
}

.left_menu > li > a {
    text-decoration: none;
    cursor: pointer;
    color: #444;
}

.left_menu a:hover, .left_menu a:visited, .left_menu a:active {
    text-decoration: none;
    color: #cd0000;
}




.menu_overlay {
 position: fixed; /* Sit on top of the page content */
    display: block; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 1000; /* Specify a stack order in case you're using a different order for other elements */
}

---

<div class="menu_overlay"></div>


<div class="left_menu_wrap">
<ul class="left_menu">
<li> 
<a href="#">Пункт 1</a>
    <ul class="left_menu_sub_panel">
            <li> 
                <ul class="left_menu_sub_panel_list">
                    <li> 
                        <a href="#">ПодПункт 1</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 1</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 2</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 3</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 4</a>
                    </li>                        
                </ul>
                <ul class="left_menu_sub_panel_list">
                    <li> 
                        <a href="#">ПодПункт 2</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 1</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 2</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 3</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 4</a>
                    </li>                        
                </ul>
            </li>    
            <li> 
                <ul class="left_menu_sub_panel_list">
                    <li> 
                        <a href="#">ПодПункт 2</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 1</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 2</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 3</a>
                    </li>                        
                </ul>
            </li>    
            <li> 
                <ul class="left_menu_sub_panel_list">
                    <li> 
                        <a href="#">ПодПункт 3</a>
                    </li>                        
                </ul>
            </li>    
            <li> 
                <ul class="left_menu_sub_panel_list">
                    <li> 
                        <a href="#">ПодПункт 4</a>
                    </li>                        
                </ul>
            </li>    
    </ul>
</li>
<li> 
<a href="#">Пункт 2</a>
</li>
<li> 
<a href="#">Пункт 3</a>
</li>
<li> 
<a href="#">Пункт 4</a>
</li>
</ul>
</div>

Am I missing anything?

UPDATE 1: I fixed and improve menu, here you can find ready to use menu:

http://jsbin.com/sivobucato/3/edit?html,css,js,output

Answer 1

You cannot used the CSS property z-index without declaring the position first.

.left_menu
{
  position: relative; // Add this code.
  z-index: 2000;
}