Подскажите, пожалуйста! Как сделать так, чтобы пункт меню оставался выделенным (:hover), когда курсор наведен на его подменю?
HTML
<nav class="header_menu">
<ul class="menu_list">
<li class="menu_item">
<a href="#" class="menu_link">Пункт меню</a>
<ul class="submenu">
<li class="submenu_item">
<a href="" class="submenu_link">Подпункт1</a>
</li>
<li class="submenu_item">
<a href="" class="submenu_link">Подпункт2</a>
</li>
<li class="submenu_item">
<a href="" class="submenu_link">Подпункт3</a>
</li>
<li class="submenu_item">
<a href="" class="submenu_link">Подпункт4</a>
</li>
</ul>
</li>
CSS
/*
* меню
*/
.menu_list {
display: flex;
list-style: none;
justify-content: flex-end;
flex-wrap: wrap;
}
.menu_item {
position: relative;
margin-left: 30px;
text-align: right;
font-size: 22px;
line-height: 30px;
color: #84CC2C;
vertical-align: bottom;
text-transform: capitalize;
}
.menu_item:first-child {
margin-left: 0px;
}
.menu_item:last-child {
margin-right: 30px;
}
.menu_link {
display: block;
text-decoration: none;
color: #84CC2C;
transition-property: all;
transition: linear 300ms;
}
.menu_link:hover, .menu_link:active, .menu_link:focus {
color: #F7931E;
letter-spacing: 1px;
transition: linear 300ms;
}
.menu_list .menu_item:hover .submenu {
opacity: 1;
}
/*
* подменю
*/
.submenu {
opacity: 0;
position: absolute;
list-style: none;
flex-wrap: wrap;
border-bottom: 2px solid #84CC2C;
background-color: #ffffff;
padding-bottom: 5px;
transition: linear 300ms;
z-index: 1;
}
.submenu_item {
position: absolute, left, top;
text-align: left;
font-size: 15px;
line-height: 20px;
color: #84CC2C;
vertical-align: auto;
text-transform: capitalize;
}
.submenu_link {
padding: 5px;
display: block;
text-decoration: none;
color: #333333;
transition-property: all;
transition: 200ms;
}
.submenu_link:hover {
color: #F7931E;
border-left: 2px solid #F7931E;
}
