html li hover,javascript - Style parent li on child li:hover - Stack Overflow

I've been digging all day to find out how to style the parent li when hovering on a child li element.

e.g.

• Parent Element
  • Child Element

I've found countless posts asking how to do it in CSS to find it's not possible. People say "you can do it with Javascript" but never say how!

I'm somewhat of a Javascript newb so some help would be much appreciated.

Thanks.

EDIT: Here is the outputted source code. I'm not sure if it will affect the selectors required for the Javascript/jQuery because, as you can see it adds additional info into the class name i.e. "page-item-9" on top of the class name there already ("page_item"). This is added by Wordpress but I've only needed to use "page_item" to reference it in the CSS.

• Home
• About
• Corporate
• Fashion, Hair & Beauty
• Live Music
  • Music 1
• Weddings
  • Wedding 1
• Miscellaneous
• Contact

EDIT 2:

Here is what I have inside my header.php file using advice given.

.highlighted { background:#000; }

$(function() {

$('.page_item .page_item').mouseenter(function() {

$(this).closest('.page_item').addClass('highlighted');

}).mouseleave(function() {

$(this).closest('.page_item').removeClass('highlighted');

});

});

If there is nothing wrong with that it must be issues with Wordpress. The code works fine without the annoying Wordpress hierarchy.