Делаю footer, на мобильной версии хочу скрывать меню, оставляя только заголовки, так же добавив стрелки, чтоб при нажатии на них меню раскрывалось. Но загвоздка в том, что скрыть меню получается, а вот когда обращаюсь через :hover, работать не хочет.
HTML:<body>
<div class="wrapper">
<div class="container">
<div class="flex__container">
<div class="left__menu">
<div class="head__link">
<a href="#" class="link__head">Туры</a>
<span class="arrow"></span>
</div>
<div class="list__item">
<a href="" class="item__link">Беломорское ожерелье</a>
</div>
<div class="list__item">
<a href="" class="item__link">Хибины-сердце кольского полуострова</a>
</div>
<div class="list__item">
<a href="" class="item__link">В гости к красавице Кутса</a>
</div>
<div class="list__item">
<a href="" class="item__link">Легенды Калевала</a>
</div>
<div class="list__item">
<a href="" class="item__link">Сокровищница Кольского</a>
</div>
<div class="list__item">
<a href="" class="item__link">Медвежья страна</a>
</div>
<div class="list__item">
<a href="" class="item__link">Синие сумерки в стране Похьёла</a>
</div>
</div>
<div class="center__menu">
<div class="head__link">
<a href="#" class="link__head">О компании</a>
<span class="arrow"></span>
</div>
<div class="list__item">
<a href="" class="item__link">Контакты</a>
</div>
<div class="list__item">
<a href="" class="item__link">Новости и акции</a>
</div>
<div class="list__item">
<a href="" class="item__link">Аренда</a>
</div>
</div>
<div class="right__menu">
<div class="head__link">
<a href="#" class="link__head">ООО “Рокан-Тур”</a>
<span class="arrow"></span>
</div>
<div class="list__item">
<a href="" class="item__link">184048, Россия, Мурманская область, г. Кандалакша, ул. Набережная. д.133</a>
</div>
<div class="list__item">
<a href="" class="item__link">+7 (921) 031-03-03
</a>
<a href="" class="item__link">rokan.tur@gmail.com</a>
</div>
<div class="list__item">
<a href="" class="item__link">Пн-Сб: 10.00–20.00
Вс: выходной</a>
</div>
<img src="img/vk.svg" alt=""><a href=""></a>
<img src="img/telegram.svg" alt=""><a href=""></a>
<img src="img/youtube 1.svg" alt=""><a href=""></a>
</div>
</div>
</div>
</div>
</body>
CSS:@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wrapper {
background-color:#D9D9D9;
height: 400px;
}
.container {
max-width: 1400px;
margin: 0 auto;
font-family: 'Inter';
}
.head__link {
margin-bottom: 15px;
}
.flex__container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.link__head,
.item__link {
text-decoration: none;
}
.item__link {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #000000;
}
.item__link:hover {
text-decoration: underline;
}
.list__item:not(:last-child) {
margin: 0px 0px 10px 0px;
}
.link__head {
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
color: #000000;
}
.right__menu {
max-width: 315px;
padding-right: 50px;
}
.list__item {
display: none;
}
.arrow .list__item:hover {
display: block;
}
.icon__block {
display: flex;
justify-content: space-between;
}
img {
display: inline-block;
margin-right: 10px;
}
@media all and (max-width: 798px) {
.flex__container {
flex-direction: column;
align-items: center;
text-align: center;
}
.head__link {
margin: 15px 0px;
}
.right__menu {
padding-right: 0px;
}
.list__item {
display: none;
}
.arrow:hover .list__item {
display: block;
transform: rotate(0);
}
.head__link {
position: relative;
}
.arrow {
position: absolute;
top: 7px;
margin-left: 10px;
width: 0px;
height: 0px;
border-top: 7px solid #fff;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
transform: rotate(90deg);
}
}
Простой
