How to change color of parent div when hovering over child?

Question

css

There is a menu with nested items. When you hover over the selected item, "it" drops out and becomes #F5F5F5 in color, but when the cursor moves over the dropped sections, the selected item should have the color #F5F5F5.
Here is the HTML code.

<ul id="nav"> 
  <li>
            <a class="MenuBlock_1" href="#">Родитель</a>
    <ul class="MenuBlock_1_panel">
      <li><a href="#">Первый пункт</a></li>
      <li><a href="#">Второй</a></li>
      <li><a href="#">Третий</a></li>
    </ul>
    </div>
  </li>

I wanted to do this:

#nav ul.MenuBlock_1_panel:hover + li .MenuBlock_1{
  background:#F5F5F5;
}

But then I found out that you cannot change the style of the parent element in CSS. I was looking for how to do it in JavaScript, I found a couple of options, but there was a problem how to specify with "li ul" tags.

Answer 1

Your menu drops out when you hover over #nav li, right?
When #nav li:hoverthis item changes color and the menu that is in this li?
The problem should be simple
#nav li:hover > a { background: #f5f5f5; }

Answer 2

there was a problem how to specify with "li ul" tags

This moment I did not quite understand something; specify. But maybe this option will work without clarification:

[].forEach.call(document.querySelectorAll('.MenuBlock_1_panel'), function (el) {
    el.addEventListener('mouseenter', function () {
        this.previousElementSibling.style.backgroundColor = '#F5F5F5';
    }, false);
    el.addEventListener('mouseleave', function () {
        this.previousElementSibling.style.backgroundColor = '';
    }, false);
});

Answer 3

And what prevents you from switching the class of the parent on hover?