When I click on the menu and sub-menu items, I want to change their colors along with their parent. You can see an example of how I want it to work here. However, currently, when I click on a sub-menu item, the color of the parent menu item gets removed.
$('li a').click(function() {
$(' li a').removeClass('active'); {
$(this).parent('a').addClass('active');
$(this).addClass('active');
}
});.active {
color: #DC0000 !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar-collapse-grid" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown yamm-fw">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">main menu<b class="caret"></b></a>
<ul class=" navbar-nav dropdown-menu">
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">menu1<b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu">
<li class="grid-demo">
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>