Trying to style sidebar widget navigation with jQuery

I am creating a school website. On some pages I want to add a sidebar navigation widget that looks like this.

https://codepen.io/Lombe/pen/owNrap

This is a live demo of how I want the site to look and the Nav sidebar widget to sit on the right side of the page, besides the tuition fees table. https://chalotrust.000webhostapp.com/primaryfees.php

I haven't made the site responsive (I'm still doing this), so anyone viewing on a mobile device will have layout issues.

For navigational items that have submenus, such as Primary Fees, I've included an arrow. Now, when I hover over the Main Menu Item, I've turned on an animation that rotates the arrow and highlights the Main Menu item in red. To rotate the arrow, I added the .rotateOnHover class to all main menu items that have an arrow. then I use CSS to perform rotation animation.

Now to the problem. When I hover over the submenu items, I want the main menu item to be highlighted and the arrow rotated. For example, when I am hovering over a Class 1-3 Rack, I want to highlight the Initial Contributions, and I want the arrow to turn. I did some searches on interwebs, and StackOverflow in particular, and was prompted to use JQuery to achieve this task. Since it is essentially hovering over a child and changing the style of its parent.

The problem is that I was hovering over the submenu items for example. "Class 1-3", it applies a spinning arrow animation to all main menu items that have the same arrow and arrow class .rotateOnHover.

How can I hover over a submenu item and apply my desired hover effects to its parent menu item only and not to all menu items?

Any help would be appreciated.

Also, any style tips for the sidebar and website would be appreciated. This is my first website and I am researching this work.

This is the sidebar code

Html

<div class="sidebar-widget">
    <div class="sidebarExplore">
        <h4>
            <span style="color: grey; text-align: center; margin:auto; display:block; font-size: 25px;">
            <i class="fa fa-globe" aria-hidden="true"></i>&nbsp;Explore This Section</span>
        </h4>
    </div>
    <ul class="sidebarExploreList">
        <li class="dropdownsidebaritem">
            <a href="#"> Primary Fees&nbsp<i class="fa fa-chevron-circle-down rotateOnHover"></i></a>
            <div class="sidebarExploreSubmenu" style="font-size: 12px;">
                <a href="" style="font-size: 15px; font-weight:bold; padding: 5px;">Grade 1 - 3 - Boarding</a>
                <a href="" style="font-size: 15px; font-weight:bold; padding: 5px;">Grade 4 - 7 - Boarding</a>
                <a href="" style="font-size: 15px; font-weight:bold; padding: 5px;">Other Costs -  Boarding</a>
                <a href="" style="font-size: 15px; font-weight:bold; padding: 5px;">Reception - Day School</a>
                <a href="" style="font-size: 15px; font-weight:bold; padding: 5px;">Grade 1 - 3 - Day School</a>
                <a href="" style="font-size: 15px; font-weight:bold; padding: 5px;">Grade 4 - 7 - Day School</a>
                <a href="" style="font-size: 15px; font-weight:bold; padding: 5px;">Other Costs - Day School</a>
            </div>
        </li>
        <li class="dropdownsidebaritem"><a href="#">Secondary Fees&nbsp<i class="fa fa-chevron-circle-down rotateOnHover"></i></a></li>
        <li><a href="#">Admission Forms</a></li>
        <li><a href="#">School Fee Policy</a></li>
    </ul>
</div>

      

        
        
        
      

    

CSS

 .sidebar-widget {
    border:1px solid #afb1b3;
    margin-top: 13.8%;
    margin-right: 5%;  
    overflow: hidden;
    background-color: #f3f3f3;
    float: right;
    width: 20%;
    height: auto;

}

.sidebar-widget ul {
    list-style-type: none;
    padding: 0;
    margin: 0;

}

.sidebar-widget ul li {
    list-style-type: none;
    width: 100%;
     border-top: 1px solid black;

}

.sidebar-widget ul li:last-child{
    list-style-type: none;
    width: 100%;
    border-bottom: 1px solid black;
}
.sidebar-widget ul li a{
    display: block;
    position: relative;
    text-decoration: none;  
    text-align: center;
    padding: 20px;
    font-size: 18px;
    font-weight: 100;
    text-rendering: optimizeLegibility;

}




.sidebarExploreSubmenu{
    display: none;
    position: relative;
    color: black;
    background-color:white;
    font-size: 11px;
    border-bottom: 0.5px solid bisque;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}


.sidebarExploreSubmenu a{
    padding: 10px;
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 10px;

}
.rotateOnHover {
    font-size:18px;
     -webkit-transition: -webkit-transform .8s ease-in-out;
          transition: transform .8s ease-in-out;
}

.sidebar-widget a:hover {
    background-color: #990000;
    color: white;
}
.dropdownsidebaritem a:hover  .rotateOnHover {
     -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.sidebarExploreSubmenu a:hover{
    font-size: 10px;
}

      

        
        
        
      

    

Js

<script type="text/javascript">

$(document).ready(function() {

    $( '.dropdownsidebaritem' ).hover(
        function(){
            $(this).children('.sidebarExploreSubmenu')
                .delay(100)
                    .slideDown(500);
        },
        function(){
            $(this).children('.sidebarExploreSubmenu')
                .clearQueue()
                .slideUp(500);
        }
    );
});


$(function() {
  $('.sidebarExploreSubmenu a').hover(function() {
    $('.rotateOnHover').css('transform', 'rotate(180deg)');
  }, function() {
    // on mouseout, reset the transform
    $('.rotateOnHover').css('transform', '');
  });
});

</script>