How to Add and Remove Class to Menu Items on Mouseover

$( document ).ready(function() {
$(".mega-drop-down li").mouseover(function (event) {
      event.preventDefault();
        $(this).addClass('active');
    });
    
     $('ul.item-menu li').on('mouseleave', function () {
      $("ul.item-menu li").removeClass('active');
      });
    })

.item-menu li{
  background:tomato;
  padding:20px 20px;
}
.active{
  background:green !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
        <li class="mega-drop-down">
            <ul class="item-menu">
                <li class="active">a</li>
                <li>b</li>
            </ul>
        </li>
        <li class="mega-drop-down">
            <ul class="item-menu">
                <li>c</li>
                <li>d</li>
            </ul>
        </li>
    </ul>

Removing and adding Classes on Dropdown Menus on Hover

So I would make a few changes, I would move the s-c-header__subnav-triggerclass to the parent li. I would then change the jquery to use the hover(in,out). The in function would look something like

function () {
  $(this).addClass($classes.SubNavItemActive);

  // Add Active Class To Subnav.
  $(this).children().addClass($classes.SubNavDropDownActive);
}

and the out

function () {
  $(this).removeClass($classes.SubNavItemActive);

  // Add Active Class To Subnav.
  $(this).children().removeClass($classes.SubNavDropDownActive);
}

Here is a jsfiddle

MouseOver remove class MouseOut restore class

Note that this will only work on wordpress

Please post edits on jsfiddle and not on this code unless it is major

Ok so we have a working menu finally. I have done some serious searching and found a fix. Now i am not sure if it is correct or not but it works like i want it to. If any one wants to use it feel free. It is being used with WordPress so i have a function to add a few lines of code and will post that below as well.

Here is the function that i added to WordPress:

function additional_active_item_classes($classes = array(), $menu_item = false){

    if(in_array('current-menu-item', $menu_item->classes)){
        $classes[] = 'active active-menu';
    }
    return $classes;
}  
add_filter( 'nav_menu_css_class', 'additional_active_item_classes', 10, 2 );

The above code is for wordpress 3.0+

This will add a class to the current menu item

So far the jQUERY i have kind of added a cluster of things and there is probably a way to merge it all together and make it work as one but i do not know how to do this but ill post the code here and then a demo to jsfiddle

Here is the jQUERY script that i pieced together and will add the effect found in the demo:

This adds a .not-active class to all parent & non-parent items:

$('*:not(li) > ul#navbar > li').addClass('not-active');

This adds a .child-menu class to all ul.sub-menus:

$('ul.sub-menu').children().addClass('child-menu');

This adds a .first-child class to the first child item in each sub-menu (added for extra styling):

$('#navbar ul.sub-menu :first-child').addClass('first-child');

This adds a .last-child class to the last child item in each sub-menu (added for extra styling):

$('#navbar ul.sub-menu :last-child').addClass('last-child');

This will toggle the class .not-active on an active menu (removes .not-active for the last script below):

$("#navbar li.active").toggleClass("not-active");

This will toggle the class .not-active on an active child menu (removes .not-active for the last script below):

$('#navbar ul.sub-menu li.active').toggleClass("not-active");

This adds a .parent-active class if .current-menu-parent is present:

$('ul#navbar li.current-menu-parent').addClass('parent-active');

This adds a .child-active class if li.current-menu-parent ul.sub-menu is present:

$('ul#navbar li.current-menu-parent ul.sub-menu').addClass('child-active');

*
This adds a .hilite class to the parent when hovering it's child menu:*

$('#navbar li').hover(
    function() {
        $(this).parents('li').children('a').addClass('hilite');
    },
    function(){
        $(this).parents('li').children('a').removeClass('hilite');
    }
);

This removes the .active class of an active menu when hovering other menu items but will not be used when hovering the active item or child items of the active item:

$('#navbar li.not-active').hover(
    function() {
        $('#navbar .active').removeClass('active-menu');
        $('#navbar li.current-menu-parent, #navbar li.current-menu-parent ul.sub-menu').removeClass('parent-active child-active');
    },
    function() {
        $('#navbar .active').addClass('active-menu');
        $('#navbar li.current-menu-parent, #navbar li.current-menu-parent ul.sub-menu').addClass('parent-active child-active');
   }
);

So now that we have the jQUERY lets get the css and html in for reference.

Here is the css:

/*Main position of menu*/
#navigation{float: left; margin: 5px 0 15px; padding: 0; position: relative;  width: 100%}
/*First UL tag for menu*/
ul#navbar{margin: 0; padding: 0; font-size: 96%; height: 20px; background: #009AD9}
/*Sets style for each LI tag and sets effects*/
#navbar li{float: left; list-style: none; text-transform: uppercase; font-weight: bold}
#navbar li a{display: block; text-decoration: none; color: #fff; padding: .24em .8em; line-height: normal}
#navbar li:hover a:hover, #navbar li a.hilite{background: #fff; color: #000}
#navbar li.active-menu a{background: #fff; border-top: 2px solid #B70F0F; padding-top: .063em; color: #666}
/*Sets parent active when child is active*/
#navbar li.parent-active a{background: #fff; color: #666}
/*Sets child-menu to not display when not-active*/
ul.sub-menu{display: none}
/*Sets the position of child menu using first-child (leave to avoid conflict with other style's)*/
#navbar li ul.sub-menu li.first-child{margin-left: -0.375em}
/*Sets child as visible on parent hover*/
#navbar li:hover ul.sub-menu{display: inline; left: 0; margin: 0; padding: 0;width: 980px; position: absolute}
/*Sets child as visible when parent is active menu*/
#navbar li.active-menu ul.sub-menu{display: inline; left: 0; margin: 0; padding: 0;width: 980px; position: absolute}
/*Sets child menu active when active item is inside of child menu*/
ul.child-active{display: inline; left: 0; margin: 0 0 0 .375em; padding: 0; position: absolute}
/*Sets style of child links*/
#navbar li ul.sub-menu li a{display: block; text-decoration: none; padding: 0 .5em; line-height: normal}
/*Sets various child link styles*/
ul.sub-menu li a{color: #666!important}
ul.sub-menu li a:hover{color: #000!important}
li.active-menu ul.sub-menu a{border-top: none!important; padding: 0 .5em!important}
#navbar li.current-menu-parent:hover ul.sub-menu{display: inline; left: 0; margin: 0 0 0 .375em; padding: 0; position: absolute}

It should be pretty simple to read

Here is the html:

<div id="navigation">
    <ul id="navbar">
        <li class="not-active"><a href="#">Main 1</a></li>
        <li class="active active-menu"><a href="#">Main 2</a>
            <ul class="sub-menu">
                <li class="child-menu first-child"><a href="#">Sub 1</a></li>
                <li class="child-menu"><a href="#">Sub 2</a></li>
                <li class="child-menu last-child"><a href="#">Sub 3</a></li>
            </ul>
        </li>
        <li class="not-active"><a href="#">Main 3</a></li>
        <li class="not-active"><a href="#">Main 4</a>
            <ul class="sub-menu">
                <li class="child-menu first-child"><a href="#">Sub 4</a></li>
                <li class="child-menu"><a href="#">Sub 5</a></li>
                <li class="child-menu last-child"><a href="#">Sub 6</a></li>
            </ul>
        </li>
    </ul>
</div>

Please feel free to use this code and if you find a simpler way to group all of those scripts then please do.

You can see a live demo here at JSFIDDLE

jQuery adding active class and removing hover effect on menu

Use .main-nav li:not(.active) a:hover in your CSS:

$(".main-nav li a").click(function() {    $(this).parent().addClass('active').siblings().removeClass('active');    });

.main-nav li:not(.active) a:hover {     border-bottom: 2px solid #1ABC9C; }.active {border-bottom: 2px solid #1ABC9C;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <ul class="main-nav">           <li><a href="#">Food delivery</a></li>           <li><a href="#">How it works</a></li>           <li><a href="#">Our cities</a></li>           <li><a href="#">Sign up</a></li>       </ul>

var activeItem = $("#menu .active");

items.hover(function () {
    activeItem.toggleClass("active");
});