Venho pesquisando o dia todo para descobrir como estilizar o li pai ao passar o mouse sobre um elemento li infantil.

por exemplo.

<ul>
<li> Parent Element </li>
    <ul>
    <li> Child Element </li>
    </ul>
<ul>

Eu encontrei inúmeras postagens perguntando como fazê-lo em CSS para descobrir que não é possível. As pessoas dizem "você pode fazer isso com Javascript", mas nunca dizem como!

Eu sou um pouco newb Javascript, então alguma ajuda seria muito apreciada.

Obrigado.

EDITAR: Aqui está o código fonte emitido. Não tenho certeza se isso afetará os seletores necessários para o Javascript / jQuery porque, como você pode ver, ele adiciona informações adicionais ao nome da classe, ou seja, "page-item-9" já está em cima do nome da classe ("page_item "). Isso foi adicionado ao Wordpress, mas eu só precisei usar o "page_item" para referenciá-lo no CSS.

    <ul class="pagenav">

    <li class="page_item page-item-12 current_page_item"><a href="#" title="Home">Home</a></li>
    <li class="page_item page-item-2"><a href="#" title="About">About</a></li>
    <li class="page_item page-item-4"><a href="#" title="Corporate">Corporate</a></li>
    <li class="page_item page-item-5"><a href="#" title="Fashion, Hair &amp; Beauty">Fashion, Hair &#038; Beauty</a></li>

    <li class="page_item page-item-6"><a href="#" title="Live Music">Live Music</a>

        <ul class='children'>
        <li class="page_item page-item-11"><a href="#" title="Music 1">Music 1</a></li>
        </ul>

    </li>

    <li class="page_item page-item-7"><a href="#" title="Weddings">Weddings</a>

        <ul class='children'>
        <li class="page_item page-item-10"><a href="#" title="Wedding 1">Wedding 1</a></li>
        </ul>

    </li>

    <li class="page_item page-item-8"><a href="#" title="Miscellaneous">Miscellaneous</a></li>
    <li class="page_item page-item-9"><a href="#" title="Contact">Contact</a></li>

    </ul>

EDIT 2:

Aqui está o que eu tenho dentro do meu arquivo header.php usando o conselho dado.

<style type="text/css">
.highlighted { background:#000; }
</style>


<script type="text/javascript">
$(function() {
    $('.page_item .page_item').mouseenter(function() {
         $(this).closest('.page_item').addClass('highlighted');
    }).mouseleave(function() {
         $(this).closest('.page_item').removeClass('highlighted');
    });
 });
 </script>

Se não há nada de errado nisso, deve haver problemas com o Wordpress. O código funciona bem sem a hierarquia irritante do Wordpress.