CSS полная ширина над меню

Question

Ive пыталась воспроизвести верхнее меню www.sklz.com, но с использованием только CSS и JS. Мне удалось получить его на 99%, но я застрял на одной маленькой ошибке. Когда меню центрировано, я не вижу, чтобы выпадающий раздел находился ниже навигационной панели (так что вы не можете видеть его, пока он не опустится ниже него), но оставайтесь над следующим div (желтая полоса в этом дело). Что бы я ни пытался использовать z-index и т. Д., Он либо помещает выпадающее меню за желтую полосу, либо над панелью навигации.

Таким образом, порядок стека Я хочу (от низкого до высокого) является:

1) Желтый бар 2) Выпадающее содержание 3) нав бар (черный 100% ширины бар) 4) нав (текст для падение падения)

body { 
 
\t margin:0px; 
 
\t padding:0px; 
 
\t text-align:center; 
 
} 
 

 
.navBar { 
 
\t width:100%; 
 
\t background-color:#000; 
 
\t z-index:0; 
 
} 
 

 
.nav { 
 
\t width:1000px; 
 
\t margin:0px auto 0px auto; 
 
\t z-index:10; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display:block; 
 
\t cursor:pointer; 
 
\t float:left; 
 
} 
 

 
.dropdownText { 
 
\t text-decoration:none; 
 
\t padding:20px 20px; 
 
\t background-color:#000; 
 
\t color:#fff; 
 
\t position: relative; 
 
\t margin:0px 0px 0px 0px; 
 
\t font-size:14px; 
 
\t z-index:5; 
 
} 
 

 
.dropdownText:hover { 
 
\t color:#FAE400; 
 
} 
 

 
.dropdown-content { 
 
    display: block; 
 
    position:fixed; 
 
\t left:0; 
 
    background-color: #f9f9f9; 
 
    width:100%; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    padding: 12px 16px; 
 
\t margin:-200px 0px 0px 0px; 
 
\t transition:all ease-out .5s; 
 
\t opacity:0; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
\t margin:0px 0px 0px 0px; 
 
\t opacity:100; 
 
}

<div style="width:100%; height:100px; background-color:#212121; z-index:150; position:relative;"></div> 
 

 
<div class="navBar"> 
 
<div class="nav"> 
 
<div class="dropdown"> 
 
    <div class="dropdownText">PERFORMANCE TRAINING</div> 
 
    <div class="dropdown-content"> 
 
    <div style="float:left; width:32%"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
    <div style="float:left; width:32%"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
    <div style="float:left; width:32%"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="dropdown"> 
 
    <div class="dropdownText">SOCCER</div> 
 
    <div class="dropdown-content"> 
 
    <div style="float:left; width:49%"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
    <div style="float:left; width:49%"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="dropdown"> 
 
    <div class="dropdownText">BASEBALL</div> 
 
    <div class="dropdown-content"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
</div> 
 
<div class="dropdown"> 
 
    <div class="dropdownText">BASKETBALL</div> 
 
    <div class="dropdown-content"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
</div> 
 
<div class="dropdown"> 
 
    <div class="dropdownText">GOLF</div> 
 
    <div class="dropdown-content"> 
 
    <div style="float:left; width:32%"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
    <div style="float:left; width:32%"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
    <div style="float:left; width:32%"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="dropdown"> 
 
    <div class="dropdownText">OTHER SPORTS</div> 
 
    <div class="dropdown-content"> 
 
    <div style="float:left; width:32%"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
    <div style="float:left; width:32%"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
    <div style="float:left; width:32%"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="dropdown"> 
 
    <div class="dropdownText">PRO MINI</div> 
 
    <div class="dropdown-content"> 
 
    <div style="float:left; width:32%"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
    <div style="float:left; width:32%"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
    <div style="float:left; width:32%"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="dropdown"> 
 
    <div class="dropdownText">EXPLORE</div> 
 
    <div class="dropdown-content"> 
 
    <div style="float:left; width:32%"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
    <div style="float:left; width:32%"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
    <div style="float:left; width:32%"> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    <p><a href="#">Product link 1</a></p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div style="clear:both;"></div> 
 
</div> 
 
</div>

Answer 1

Вы можете установить переход на макс высоты собственности. Изменить эти два CSS класса:

.dropdown-content { 
    display: block; 
    position:fixed; 
    left:0; 
    background-color: #f9f9f9; 
    width:100%; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    padding: 12px 16px; 
    margin:-200px 0px 0px 0px; 
    transition:all ease-out .5s; 
    opacity:0; 
    max-height: 0; 
    transition: max-height 0.15s ease-out; 
    overflow: hidden; 
} 

.dropdown:hover .dropdown-content { 
    display: block; 
    margin:0px 0px 0px 0px; 
    opacity:100; 
    max-height: 500px; 
    transition: max-height 1s ease-in; 
} 

JSFiddle