Trying to style a Sidebar Widget Navigation with JQuery

Question

For the navigational items which have a submenu, for example, 'Primary Fees', I have included an arrow. Now when I hover over the Main Menu Item, I have included an animation which rotates the arrow and highlights the Main Menu item with red. In order to rotate the arrow, I added a .rotateOnHover class to all the Main Menu Items which have the arrow. then I use CSS to perform the rotation animation.

Now to the problem. When I hover over the submenu Items, I want to keep that particular Main Menu item highlighted and keep the arrow rotated. For example, when I hover over 'Grade 1-3 Boarding', I want to keep 'Primary Fees' highlighted and I want to keep the arrow rotated. I did some searching on the interwebs, and in particular StackOverflow, and I was encouraged to use Jquery to achieve this task. Since this is in essence, hovering over a child element and changing the style of its parent element.

The problem is when I hover over the submenu items e.g. 'Grade 1-3 Boarding', it applies the rotating arrow animation to ALL the main menu items which 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 all the menu items?

Any help will be appreciated.

Also, any styling tips for the sidebar and the website, in general, will be appreciated. This is my very first website and I'm learning on the job.

This is the code for the sidebar

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>

Answer 1

First of all don't style inline elements, example:

    <a href="" style="font-size: 15px; font-weight:bold; padding: 5px;">Grade 4 - 7 - Day School</a>

instead make it like that:

<a href="" class="sidebarExploreSubmenu-anchor">Grade 4 - 7 - Day School</a>

and then in style.css add:

.sidebarExploreSubmenu-anchor {
font-size: 15px; font-weight:bold; padding: 5px; }

It can make your website messy. Try to do everything in style.css, remember that there're levels in which browser are reading styles, example: !important > inline styles > #style .style .style > .style .style > .style