How to keep the :hover style of an element when hovering over items in its nested list?

Question

css

Tell me please! How can I make a menu item stay highlighted (:hover) when the cursor is hovered over its submenu?

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;
}

Answer 1

wanted this?