When creating navigational items with submenus, such as 'Primary Fees', I added an arrow for visual indication. To enhance user experience, I included an animation that rotates the arrow and highlights the Main Menu item in red upon hovering. This involved adding a .rotateOnHover class to all Main Menu Items with arrows and then using CSS for the rotation animation.

However, I encountered an issue. When hovering over the submenu items like 'Grade 1-3 Boarding', I wanted to keep the parent menu item highlighted and maintain the rotated arrow. After researching online resources like StackOverflow, I learned that utilizing Jquery could help achieve this task by changing the style of a child element's parent.

The main problem arose when hovering over submenu items like 'Grade 1-3 Boarding' caused the rotating arrow animation to apply to all main menu items with the same arrow and .rotateOnHover class.

I sought assistance on how to hover over a submenu item and only apply the desired hover effects to its parent Menu Item without affecting all menu items with similar styling.

Any guidance or tips on styling the sidebar and the overall website would be greatly appreciated since this is my first web development project.

Below is the code snippet 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>