CSS - наложение всегда в верхней части меню - PullRequest
Новая
       25

CSS - наложение всегда в верхней части меню

0 голосов
/ 19 сентября 2018

Я создаю меню с наложением.Это работало на ранних стадиях, но сейчас у меня необычная проблема.Я создал оверлей и меню, но оверлей всегда сверху, независимо от того, какое значение я установил для его z-индекса.

Я планирую создать меню, которое откроет подменю при наведении, после чегоналожение должно быть показано так, чтобы на экране были видны только пункты меню и подменю.

Вот демонстрация: 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>

Я что-то пропустил?

ОБНОВЛЕНИЕ 1: Я исправил и улучшил меню, здесь вы можете найти готовое к использованию меню:

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

1 Ответ

0 голосов
/ 19 сентября 2018

Нельзя использовать z-index свойства CSS без предварительного объявления позиции. 

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