WordPress: Trying to Display sub-menu when hover not working

Question

I am trying to show the .sub-menu when about page is hovered in the wordpress navigation. It doesn't seem to work.

I'm not sure if the problem is with my JQuery or my CSS. What do I need to change to make the sub-menu appear on hover?

WordPress Rendered 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') }
 )

Answer 1

Might you be forgetting the semicolons at the end?

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

If not, you can also try a mouseover function...

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

Also, I'd remove the importants unless there's a good reason, they may interfere, example:

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