Как сделать что-бы при наведении на "Каталог" должен открываться серый блок, при наведении на "названия" появляется красный блок? И как можно вынести из контейнера серый и красный цвет фона выпадающего меню, они должен занимать 100% экрана, серый слева, красный справа, но при этом "названия" должно быть под словом "Каталог". Спасибо)
https://jsfiddle.net/aoh2zd0w/61/
.bottom-header__catalog {
max-width: 800px;
margin: 0 auto;
position: relative;
}
.catalog-header__title {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
font-size: 18px;
line-height: math.div(21, 18);
color: #ffffff;
background: #fd9d08;
border-radius: 7px;
padding: 10px;
height: 50px;
width: 160px;
transition: all 0.3s ease 0s;
}
.catalog-header__block {
/*opacity: 0;*/
}
@media (any-hover: hover) {
.catalog-header__title:hover .catalog-header__block{
transform: translate(0px, 0px);
opacity: 1;
}
}
.catalog-header__list {
background: #f4f4f4;
width: 30%;
padding: 22px 0px 46px 0px;
min-height: 1049px;
}
.catalog-header__link {
margin: 0px 0px 10px 0px;
list-style: none;
}
.catalog-header__subtitle {
font-weight: 500;
font-size: 18px;
color: #000000;
text-decoration: none;
}
.catalog-header__item ul li {
list-style: none;
}
.catalog-header__item {
position: absolute;
left: 30%;
top: 7%;
width: 100%;
padding: 22px 20px 64px 64px;
background-color: red;
}
.catalog-header__item ul {
margin: -13px;
display: flex;
height: 450px;
flex-direction: column;
flex-wrap: wrap;
}
<div class="bottom-header__catalog catalog-header">
<div class="catalog-header__title">Каталог</div>
<div class="catalog-header__block">
<ul class="catalog-header__list">
<li class="catalog-header__link">
<a href="#" class="catalog-header__subtitle">Название</a>
<div class="catalog-header__item">
<ul>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
</ul>
</div>
</li>
<li class="catalog-header__link">
<a href="#" class="catalog-header__subtitle">Название</a>
<div class="catalog-header__item">
<ul>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>