Почему не работает z-index?

Почему не работает z-index у .sub-menu1?
Нужно, чтобы меню выезжало из под header.

<div class="header clearfix">
<div class="container">
    <div class="logo"></div>
    <div class="menu-right"></div>

    <div class="menu-center">
      <ul class="menu1">
        <li class="men1"><a href="#">Item</a> </li> 
                               <div class="submenu1"></div>
     </ul> 
    </div>
</div> 
</div>


.container {
 width: 1140px;
 margin: 0 auto;
}

.clearfix::after {
 content: "";
 display: table;
 clear: both;
}

.header {
 width: 100%;
 height: 108px;
 background-color: #262626;
 margin: 0;
 position: relative;
 z-index: 1;
}


.logo {
 width: 143px;
 height: 100%;
 float: left;
 background: url("logo.png") no-repeat 50% 50%;
}

 .menu-right {
 width: 143px;
 height: 100%;
 float: right; 
 line-height: 108px;
 text-align: center;
}

.menu-center {
 height: 100%;
 margin-left: 153px;
 line-height: 108px;
 padding-left: 89px;
}

.submenu1 {
display: block;
width: 100%;
height: 80px;
background-color: grey;
overflow: hidden;
position: absolute;
left: 0;
top: 28px;
transition: 1s;
z-index: 100;
}

.men1:hover + .submenu1 {
transform: translateY(50px);
}
  • Вопрос задан
  • 5043 просмотра
Пригласить эксперта
Ответы на вопрос 2
@devstudent
frontend-developer
потому что оно внутри header ваше субменю, у него не может быть индекс выше , чем у родителя, хоть 100500 выставьте, не сработает, только выше чем у других элеметнов того же уровня, что и субменю.
Ответ написан
zRrr
@zRrr
Ноунейм какой-то
Сделайте одинаковый position у header и submenu1.
Было похожая проблема, решил, поставив одинаковое значение свойства position.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы