Возможно ли связать, средствами HTML + CSS, исполнение нескольких действий при наведении на div элемент?
Хотелось бы сделать выдвижной блок при наведении на навигационное меню сайта, при это должен появляться одновременно border-bottom и происходить разворот стрелки. Трансформацию отдельных элементов я сделал, но не получается связать их. Воссоздаю для себя пример этого сайта: https://www.paypal.com/ru/.
*
{
background-color: black;
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.menu_list
{
display: flex;
justify-content: center;
list-style: none;
}
.section
{
color: white;
font-size: 15px;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 0 2px black;
letter-spacing: 1px;
}
.arrow
{
border: solid white;
border-width: 0 1px 1px 0;
height: 4px;
margin-top: 4px;
margin-left: 10px;
padding: 4px;
width: 4px;
}
.down
{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: all 0.3s;
}
.down:hover
{
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.dropdown_list
{
display: none;
}
.border_bottom
{
border-bottom: 2px solid transparent;
transition: all 0.3s;
}
.border_bottom:hover
{
border-bottom: solid white 2px;
}
.wrap
{
display: flex;
padding: 20px 30px;
}
<div class="menu">
<ul class="menu_list">
<li class="border_bottom">
<div class="wrap">
<a href="https://www.paypal.com/ru/webapps/mpp/home" class="section">Личный</a>
<div class="arrow down"></div>
<div class="dropdown_list">
<ul>
<li> Как работает PayPal. Возможности Личного счета</li>
<li> Оплачивайте онлайн. Онлайн-платежи по всему миру</li>
<li> Отправляйте переводы. Переводы по России и за границу</li>
<li> Получайте переводы. Запросите платеж у любого пользователя</li>
<li> Скачайте приложение PayPal. Управляйте счетом с мобильного</li>
</ul>
</div>
</div>
</li>
</ul>
</div>