menu item hover finally goes black overriding original theme

src/app/app.component.html

@@ -1,7 +1,7 @@
 <kendo-appbar id='topBar' *ngIf='login' class='appbar' [position]="'top'" [positionMode]="'sticky'">
   <kendo-appbar-section>
     <kendo-menu [items]="items" (select)="onSelect($event)"> 
-      <ng-template kendoMenuItemTemplate let-item="item" >
+      <ng-template kendoMenuItemTemplate let-item="item">
         <span class='main-menu-item'>
           <fa-icon  *ngIf="menuItemHasFontawesome(item)" [icon]="item.fa"></fa-icon> &nbsp;
         {{ item.text }}  </span>

src/app/app.component.scss

@@ -24,10 +24,17 @@
     z-index: 1000;
 }
 
-#topBar .main-menu-item , #topBar .k-icon {
+#topBar .main-menu-item , #topBar .k-icon, #topBar .k-menu-item {
     color:black !important; 
 }
 
 .k-menu:not(.k-context-menu) > .k-item > .k-state-active {
+    font-weight: bold; 
+    background-color: lightblue; 
+}
+
+.k-popup.k-menu-popup .k-menu-item:hover {
+    color: black;
+    font-weight: bold; 
     background-color: lightblue; 
 }