diff --git a/theme_kit/models/theme.py b/theme_kit/models/theme.py
index bd18be408d..841324f400 100644
--- a/theme_kit/models/theme.py
+++ b/theme_kit/models/theme.py
@@ -104,6 +104,14 @@ class ThemeTopPanel(models.Model):
         default=False, help="Active item Background color for Top Panel"
     )
 
+    top_panel_active_subitem_bg = fields.Char(
+        "Active submenu item Background color",
+        help="Active item Background color for Top Panel",
+    )
+    top_panel_active_subitem_bg_active = fields.Boolean(
+        default=False, help="Active submenu item Background color for Top Panel"
+    )
+
     top_panel_hover_item_font = fields.Char(
         "Hover item Font color", help="Hover item Font color for Top Panel"
     )
@@ -117,6 +125,12 @@ class ThemeTopPanel(models.Model):
     top_panel_hover_item_bg_active = fields.Boolean(
         default=False, help="Hover item Background color for Top Panel"
     )
+    top_panel_hover_subitem_bg = fields.Char(
+        "Hover submenu item Background color", help="Hover item Background color for Top Panel"
+    )
+    top_panel_hover_subitem_bg_active = fields.Boolean(
+        default=False, help="Hover submenu item Background color for Top Panel"
+    )
 
     # Compatibility theme_kit and material backend theme modules
     left_panel_main_menu = fields.Char(
@@ -163,10 +177,14 @@ def write(self, vals):
             self.top_panel_hover_item_font = ""
         if not vals.get("top_panel_hover_item_bg_active", "Not found"):
             self.top_panel_hover_item_bg = ""
+        if not vals.get("top_panel_hover_subitem_bg_active", "Not found"):
+            self.top_panel_hover_subitem_bg = ""
         if not vals.get("left_panel_main_menu_active", "Not found"):
             self.left_panel_main_menu = ""
         if not vals.get("left_panel_sub_menu_active", "Not found"):
             self.top_panel_hover_item_bg = ""
+        if not vals.get("top_panel_active_subitem_bg_active", "Not found"):
+            self.top_panel_active_subitem_bg = ""
 
     @api.multi
     def _compute_less(self):
@@ -310,6 +328,16 @@ def _compute_less(self):
                     code
                     + """.navbar-nav .active a{{
                     background-color: {theme.top_panel_active_item_bg}!important;
+                }}
+                #odooMenuBarNav > div > div.o_sub_menu_content > ul > li > a.active{{
+                    background-color: {theme.top_panel_active_item_bg}!important;
+                }}"""
+                )
+            if self.top_panel_active_subitem_bg_active:
+                code = (
+                    code
+                    + """#odooMenuBarNav > div > div.o_sub_menu_content > ul > li > ul > li.active > a{{
+                    background-color: {theme.top_panel_active_subitem_bg}!important;
                 }}"""
                 )
             if self.top_panel_hover_item_font_active:
@@ -348,31 +376,22 @@ def _compute_less(self):
                 """
                 )
             if self.top_panel_hover_item_bg_active:
+            # Compatibility theme_kit and material backend theme modules
                 code = (
                     code
-                    + """.o_main_navbar > ul > li > a:hover{{
-                    background-color: {theme.top_panel_hover_item_bg}!important;
-                }}
-                .o_main_navbar > ul > li > a:focus{{
-                    background-color: {theme.top_panel_hover_item_bg}!important;
-                }}
-                .navbar-nav li a:hover{{
-                    background-color: {theme.top_panel_hover_item_bg}!important;
-                }}
-                .navbar-nav li a:focus{{
-                    background-color: {theme.top_panel_hover_item_bg}!important;
-                }}
-                .o_main_navbar > .o_menu_toggle:hover{{
-                    background-color: {theme.top_panel_hover_item_bg}!important;
+                    + """#odooMenuBarNav > div > div.o_sub_menu_content > ul > li > a:hover{{
+                    background-color: {theme.top_panel_hover_item_bg} !important;
                 }}
-                .o_main_navbar > .o_menu_toggle:focus{{
-                    background-color: {theme.top_panel_hover_item_bg}!important;
+                #odooMenuBarNav > div > div.o_sub_menu_content > ul > li > a:focus{{
+                    background-color: {theme.top_panel_hover_item_bg} !important;
                 }}
-                .open .dropdown-menu > li a:hover {{
-                    background-color: {theme.top_panel_hover_item_bg}!important;
-                }}
-                .open .dropdown-menu > li a:focus {{
-                    background-color: {theme.top_panel_hover_item_bg}!important;
+                """
+                )
+            if self.top_panel_hover_subitem_bg_active:
+                code = (
+                    code
+                    + """#odooMenuBarNav > div > div.o_sub_menu_content > ul > li > ul > li > a:hover {{
+                    background: {theme.top_panel_hover_subitem_bg} !important;
                 }}
                 """
                 )
@@ -624,6 +643,9 @@ def _compute_less(self):
                 .o_mail_chat .o_mail_chat_sidebar .o_mail_chat_channel_item.o_active {{
                     background-color: {theme.left_panel_active_item_bg}!important;
                 }}
+                #sidebar > li > a.active{{
+                    background-color: {theme.left_panel_active_item_bg}!important;
+                }}
                 """
                 )
             if self.left_panel_hover_item_font_active:
diff --git a/theme_kit/static/js/theme_kit.js b/theme_kit/static/js/theme_kit.js
new file mode 100644
index 0000000000..d923b19b3f
--- /dev/null
+++ b/theme_kit/static/js/theme_kit.js
@@ -0,0 +1,29 @@
+/*  Copyright 2020 Vildan Safin <https://www.it-projects.info/team/Enigma228322>
+    License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).*/
+odoo.define('theme_kit.model', function (require) {
+    "use strict";
+
+    var WebClient = require("web.WebClient");
+
+    WebClient.include({
+        init: function (parent) {
+            this._super.apply(this, arguments);
+            var self = this;
+        },
+    });
+    $(document).ready(function(e){
+        $('#odooMenuBarNav > div > div.o_sub_menu_content > ul > li > a').click(function (e) {
+            if($('#odooMenuBarNav > div > div.o_sub_menu_content > ul > li > a') != undefined){
+                $('#odooMenuBarNav > div > div.o_sub_menu_content > ul > li > a').removeClass("active");
+                $("#odooMenuBarNav > div > div.o_sub_menu_content > ul > li.active").removeClass("active")
+            }
+            $(e.target).addClass("active");
+        });
+        $("#sidebar > li > a").click(function(e){
+            if($("#sidebar > li > a") != undefined){
+                $("#sidebar > li > a").removeClass("active");
+            }
+            $(e.target).addClass("active");
+        });
+    });
+});
diff --git a/theme_kit/views/templates.xml b/theme_kit/views/templates.xml
index 0d53e410dc..857fcf177c 100644
--- a/theme_kit/views/templates.xml
+++ b/theme_kit/views/templates.xml
@@ -14,6 +14,16 @@
             <t t-call="theme_kit.custom_css" />
         </xpath>
     </template>
-    <template id="theme_kit.dummy">
-        </template>
+    <template
+        id="theme_kit"
+        name="Theme kit JS"
+        inherit_id="web.assets_backend"
+    >
+        <xpath expr="." position="inside">
+            <script
+                type="text/javascript"
+                src="/theme_kit/static/js/theme_kit.js"
+            />
+        </xpath>
+    </template>
 </odoo>
diff --git a/theme_kit/views/theme.xml b/theme_kit/views/theme.xml
index b7ae33ca88..8f898b18f8 100644
--- a/theme_kit/views/theme.xml
+++ b/theme_kit/views/theme.xml
@@ -85,6 +85,11 @@
                                     <field name="top_panel_active_item_bg_active" nolabel="1" class="oe_inline"/>
                                     <field name="top_panel_active_item_bg" widget="color" attrs="{'readonly':[('top_panel_active_item_bg_active','=',False)]}" class="oe_inline"/>
                                 </div>
+                                <div>
+                                    <label for="top_panel_active_subitem_bg" />
+                                    <field name="top_panel_active_subitem_bg_active" nolabel="1" class="oe_inline"/>
+                                    <field name="top_panel_active_subitem_bg" widget="color" attrs="{'readonly':[('top_panel_active_subitem_bg_active','=',False)]}" class="oe_inline"/>
+                                </div>
                                 <div>
                                     <label for="top_panel_hover_item_font" />
                                     <field name="top_panel_hover_item_font_active" nolabel="1" class="oe_inline"/>
@@ -95,6 +100,11 @@
                                     <field name="top_panel_hover_item_bg_active" nolabel="1" class="oe_inline"/>
                                     <field name="top_panel_hover_item_bg" widget="color" attrs="{'readonly':[('top_panel_hover_item_bg_active','=',False)]}" class="oe_inline"/>
                                 </div>
+                                <div>
+                                    <label for="top_panel_hover_subitem_bg" />
+                                    <field name="top_panel_hover_subitem_bg_active" nolabel="1" class="oe_inline"/>
+                                    <field name="top_panel_hover_subitem_bg" widget="color" attrs="{'readonly':[('top_panel_hover_subitem_bg_active','=',False)]}" class="oe_inline"/>
+                                </div>
                             </group>
                         </group>
                     </sheet>