Как изменить цвет родительского div'a при наведении на дочерний?

Question

[Евгений Лиферов]

Имеется меню с вложенными элементами. При наведении на выбранный пункт "оно" выпадает и становиться #F5F5F5 цветом, но когда курсор уводится на выпавшие разделы, то выбранный пункт должен иметь цвет #F5F5F5.
Вот HTML код.

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

Я хотел сделать так:

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

Но потом узнал, что изменять стиль родительского элемента в CSS нельзя. Искал как сделать на JavaScript, нашел пару вариантов, но появились проблема, как указать с тегами "li ul".

Answer 1

[Valery]

У вас меню выпадает при наведении на #nav li, верно?
При #nav li:hover этот пункт меняет цвет и выпадает меню, которое находится в этом li?
Задача должна решаться простым
#nav li:hover > a { background: #f5f5f5; }

Answer 2

[Денис]

появились проблема, как указать с тегами "li ul"

Этот момент я что-то не совсем понял; уточняйте. Но может такой вариант подойдёт без уточнений:

[].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);
});