How to apply style only for first level menu - html

Question

Here i have the menu structure, what am i trying to do is that, when i click the parent level item or any sub menu item the class active is going to get added to the menu which is clicked.
i want to change the color of only the parent menu item but not the sub menu item, how can i do that. right now what is happening is that i have applied css, but its getting applied to parent menu as well as the child menu items.
.center-in-menu {
&:not(div.we-mega-menu-submenu) {
.we-mega-menu-li.active {
a {
color: blue !important;
}
}
}
}
<ul class="nav-tabs center-in-menu">
<li class="we-mega-menu-li dropdown-menu">
Menu 1
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li class="we-mega-menu-li">submenu1</li>
<li class="we-mega-menu-li dropdown-menu">submenu2</li>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li class="we-mega-menu-li">submenu1</li>
<li class="we-mega-menu-li">submenu1</li>
<li class="we-mega-menu-li">submenu1</li>
<li class="we-mega-menu-li">submenu1</li>
<li class="we-mega-menu-li">submenu1</li>
</ul>
</div>
<li class="we-mega-menu-li">submenu3</li>
<li class="we-mega-menu-li">submenu4</li>
<li class="we-mega-menu-li">submenu5</li>
</ul>
</div>
<li class="we-mega-menu-li">Menu 2</li>
<li class="we-mega-menu-li">Menu 3</li>
<li class="we-mega-menu-li dropdown-menu">
Menu 4
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li class="we-mega-menu-li">submenu1</li>
<li class="we-mega-menu-li active dropdown-menu">submenu2</li>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li class="we-mega-menu-li active">submenu1</li>
<li class="we-mega-menu-li">submenu2</li>
<li class="we-mega-menu-li">submenu3</li>
<li class="we-mega-menu-li">submenu4</li>
<li class="we-mega-menu-li">submenu5</li>
</ul>
</div>
<li class="we-mega-menu-li">submenu3</li>
<li class="we-mega-menu-li">submenu4</li>
<li class="we-mega-menu-li">submenu5</li>
</ul>
</div>
</li>
<li class="we-mega-menu-li">Menu 5</li>
</ul>
Example here
https://codepen.io/Chandanay/pen/YzKJNEE

Answer 1

Use > to apply styles only to elements inside the given selector without going deeper any further.
Here's an example:
div.wrapper > a { /* only applied to direct children */
font-weight: bold;
}
div.inner a {
font-style: italic;
}
<div class="wrapper">
<a>1st Level (Bold)</a>
<div class="inner">
<a>2nd Level (Italic)</a>
</div>
<div class="noclass">
<a>2nd Level (No style)</a>
</div>
</div>