WordPress: Tentativa de exibição do submenu quando o foco não está funcionando - javascript, jquery, html, css, wordpress

Estou tentando mostrar o .sub-menu quando about A página está pairando na navegação do wordpress. Não parece funcionar.

Não tenho certeza se o problema está no meu JQuery ou no meu CSS. O que preciso alterar para que o submenu apareça ao passar o mouse?

WordPress renderizado em HTML

 <div class="menu-primary-menu-links-container">
<ul id="menu-primary-menu-links" class="menu">
<li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-21 current_page_item menu-item-167"><a href="http://localhost/wordpress/">Home</a></li>
<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-165"><a href="http://localhost/wordpress/about/">About</a>

<ul class="sub-menu">
<li id="menu-item-180" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-180"><a href="http://localhost/wordpress/our-team/">Our Team</a></li>
<li id="menu-item-179" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-179"><a href="http://localhost/wordpress/our-mission/">Our Mission</a></li>
<li id="menu-item-178" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-178"><a href="http://localhost/wordpress/members-data-bank/">Members Data Bank</a></li>
</ul>
</li>
<li id="menu-item-170" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-170"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li>
<li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-166"><a href="http://localhost/wordpress/blog/">Blog</a></li>
<li id="menu-item-164" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-164"><a href="http://localhost/wordpress/contact/">Contact</a></li>
</ul>
</div>

CSS

.show-sub-menu-pages {
display: flex !important;
flex-direction: column !important;
}

.sub-menu {
display: none !important;
padding: 0;
z-index: 999;
background-color: red !important;
position: absolute;
right:220px;
top: 60px;

}

JQuery

$("#menu-item-165").hover(
function(){ $(this).addClass("show-sub-menu-pages") }
)

Respostas:

Você pode estar esquecendo o ponto e vírgula no final?

$("#menu-item-165").hover(function(){
$(this).addClass("show-sub-menu-pages");
});

Caso contrário, você também pode tentar uma função de mouseover ...

$("#menu-item-165").mouseover(function(){
$(this).addClass("show-sub-menu-pages");
});

Além disso, eu removeria os importantes, a menos que haja um bom motivo, eles podem interferir, por exemplo:

.sub-menu {
display: none;
padding: 0;
z-index: 999;
background-color: red;
position: absolute;
right:220px;
top: 60px;
}