diff --git a/frontends/php/app/views/layout.htmlpage.menu.php b/frontends/php/app/views/layout.htmlpage.menu.php
index 47254d8..987c373 100644
--- a/frontends/php/app/views/layout.htmlpage.menu.php
+++ b/frontends/php/app/views/layout.htmlpage.menu.php
@@ -58,22 +58,23 @@ $icons->addItem(
 );
 
 // 1st level menu
+$top_menu = ( $data['server_name'] !== '' ) ? new CSpan($data['server_name']) : null;
 $top_menu = (new CDiv())
-	->addItem(new CLink((new CDiv())->addClass(ZBX_STYLE_LOGO), 'zabbix.php?action=dashboard.view'))
-	->addItem(
-		(new CList($data['menu']['main_menu']))->addClass(ZBX_STYLE_TOP_NAV)
-	)
-	->addItem($icons)
+	->addItem(new CLink((new CDiv($top_menu))->addClass(ZBX_STYLE_LOGO), 'zabbix.php?action=dashboard.view'))
 	->addClass(ZBX_STYLE_TOP_NAV_CONTAINER)
 	->setId('mmenu');
 
-$sub_menu_div = (new CDiv())
-	->addClass(ZBX_STYLE_TOP_SUBNAV_CONTAINER)
-	->onMouseover('javascript: MMenu.submenu_mouseOver();')
-	->onMouseout('javascript: MMenu.mouseOut();');
+$menu_div = (new CList())->addClass(ZBX_STYLE_TOP_NAV);
 
 // 2nd level menu
-foreach ($data['menu']['sub_menus'] as $label => $sub_menu) {
+foreach ($data['menu']['main_menu'] as $item) {
+	$label = $item->attributes['id'];
+	if ( !isset( $data['menu']['sub_menus'][$label] ) ) {
+		$menu_div->addItem( $item );
+		continue;
+	}
+	$sub_menu = $data['menu']['sub_menus'][$label];
+
 	$sub_menu_row = (new CList())
 		->addClass(ZBX_STYLE_TOP_SUBNAV)
 		->setId('sub_'.$label);
@@ -103,21 +104,18 @@ foreach ($data['menu']['sub_menus'] as $label => $sub_menu) {
 	else {
 		$sub_menu_row->setAttribute('style', 'display: none;');
 	}
-	$sub_menu_div->addItem($sub_menu_row);
+	$menu_div->addItem($item->addItem($sub_menu_row));
 }
 
-if ($data['server_name'] !== '') {
-	$sub_menu_div->addItem(
-		(new CDiv($data['server_name']))->addClass(ZBX_STYLE_SERVER_NAME)
-	);
-}
+$top_menu
+	->addItem($menu_div)
+	->addItem($icons);
 
 (new CTag('header', true))
 	->setAttribute('role', 'banner')
 	->addItem(
 		(new CDiv())
 			->addItem($top_menu)
-			->addItem($sub_menu_div)
 			->addClass(ZBX_STYLE_NAV)
 			->setAttribute('role', 'navigation')
 	)
diff --git a/frontends/php/include/defines.inc.php b/frontends/php/include/defines.inc.php
index 58fda12..7895217 100644
--- a/frontends/php/include/defines.inc.php
+++ b/frontends/php/include/defines.inc.php
@@ -1218,7 +1218,6 @@ define('ZBX_STYLE_TOP_NAV_PROFILE', 'top-nav-profile');
 define('ZBX_STYLE_TOP_NAV_SIGNOUT', 'top-nav-signout');
 define('ZBX_STYLE_TOP_NAV_ZBBSHARE', 'top-nav-zbbshare');
 define('ZBX_STYLE_TOP_SUBNAV', 'top-subnav');
-define('ZBX_STYLE_TOP_SUBNAV_CONTAINER', 'top-subnav-container');
 define('ZBX_STYLE_TREEVIEW', 'treeview');
 define('ZBX_STYLE_TREEVIEW_PLUS', 'treeview-plus');
 define('ZBX_STYLE_UPPERCASE', 'uppercase');
diff --git a/frontends/php/styles/blue-theme.css b/frontends/php/styles/blue-theme.css
index e78044d..b8cb5c5 100644
--- a/frontends/php/styles/blue-theme.css
+++ b/frontends/php/styles/blue-theme.css
@@ -161,15 +161,11 @@ nav a:link, .nav a:link, nav a:visited, .nav a:visited, nav a:hover, .nav a:hove
   .top-nav li {
     display: block;
     float: left; }
-    .top-nav li.selected, .top-nav .calendar li.selected:hover, .calendar .top-nav li.selected:hover {
-      position: relative; }
-      .top-nav li.selected::after, .top-nav .calendar li.selected:hover::after, .calendar .top-nav li.selected:hover::after {
+    .top-nav li.selected, .top-nav .calendar li.selected:hover, .calendar .top-nav li.selected:hover {}
+      .top-nav li.selected > a::before, .top-nav .calendar li.selected:hover > a::before, .calendar .top-nav li.selected:hover > a::before {
         content: '';
         position: absolute;
-        bottom: -1px;
-        left: 0;
-        right: 0;
-        margin: 0 auto;
+        margin-top: 40px;
         width: 0;
         height: 0;
         font-size: 0;
@@ -261,7 +257,8 @@ ul.top-nav-icons {
       opacity: 1;
       filter: alpha(opacity=100); }
 
-.top-subnav-container {
+.nav:after {
+  content: "";
   height: 32px;
   line-height: 32px;
   background-color: #0a466a;
@@ -271,31 +268,30 @@ ul.top-nav-icons {
 .top-subnav {
   background-color: #0a466a;
   position: absolute;
+  line-height: 32px;
+  font-size: .9em;
+  z-index: 9;
   left: 0; }
   .top-subnav li {
     display: block;
     float: left;
     padding: 0 12px; }
-    .top-subnav li:last-child {
-      -webkit-box-shadow: 25px 0px 10px -10px #0a466a;
-      -moz-box-shadow: 25px 0px 10px -10px #0a466a;
-      box-shadow: 25px 0px 10px -10px #0a466a; }
 
 .top-subnav a {
   padding: 9px 1px; }
-  .top-subnav a:link {
+  .top-subnav a:link, .top-nav li.selected li a:link {
     color: rgba(255, 255, 255, 0.75); }
-  .top-subnav a:visited {
+  .top-subnav a:visited, .top-nav li.selected li a:visited {
     color: rgba(255, 255, 255, 0.75); }
-  .top-subnav a:hover {
+  .top-subnav a:hover, .top-nav li.selected li a:hover {
     color: white; }
-  .top-subnav a:focus {
+  .top-subnav a:focus, .top-nav li.selected li a:focus {
     color: white; }
-  .top-subnav a:active {
+  .top-subnav a:active, .top-nav li.selected li a:active {
     color: white; }
   .top-subnav a.selected, .top-subnav .calendar a.selected:hover, .calendar .top-subnav a.selected:hover {
     color: white;
-    padding: 9px 1px 6px 1px;
+    padding: 9px 1px 5px 1px;
     border-bottom: 3px solid #1384c7; }
 
 .arrow-up {
@@ -1185,7 +1181,7 @@ button {
   top: 13px;
   right: 8px;
   width: 24px;
-  min-height: 22px;
+  height: 22px;
   padding: 0;
   opacity: 0.75;
   filter: alpha(opacity=75);
@@ -2405,9 +2401,11 @@ tr.cursor-move td * {
   position: relative;
   display: inline-block; }
 
-.server-name {
+.logo span { /* server-name */
+  position: absolute;
+  margin-top: 28px;
+  right: 15px;
   color: #768d99;
-  float: right;
   white-space: nowrap;
   overflow: hidden; }
 
diff --git a/frontends/php/styles/dark-theme.css b/frontends/php/styles/dark-theme.css
index a030903..64d6ede 100644
--- a/frontends/php/styles/dark-theme.css
+++ b/frontends/php/styles/dark-theme.css
@@ -176,15 +176,11 @@ nav a:link, .nav a:link, nav a:visited, .nav a:visited, nav a:hover, .nav a:hove
   .top-nav li {
     display: block;
     float: left; }
-    .top-nav li.selected, .top-nav .calendar li.selected:hover, .calendar .top-nav li.selected:hover {
-      position: relative; }
-      .top-nav li.selected::after, .top-nav .calendar li.selected:hover::after, .calendar .top-nav li.selected:hover::after {
+    .top-nav li.selected, .top-nav .calendar li.selected:hover, .calendar .top-nav li.selected:hover {}
+      .top-nav li.selected > a::before, .top-nav .calendar li.selected:hover > a::before, .calendar .top-nav li.selected:hover > a::before {
         content: '';
         position: absolute;
-        bottom: -1px;
-        left: 0;
-        right: 0;
-        margin: 0 auto;
+        margin-top: 40px;
         width: 0;
         height: 0;
         font-size: 0;
@@ -276,7 +272,8 @@ ul.top-nav-icons {
       opacity: 1;
       filter: alpha(opacity=100); }
 
-.top-subnav-container {
+.nav:after {
+  content: "";
   height: 32px;
   line-height: 32px;
   background-color: #454545;
@@ -286,31 +283,30 @@ ul.top-nav-icons {
 .top-subnav {
   background-color: #454545;
   position: absolute;
+  line-height: 32px;
+  font-size: .9em;
+  z-index: 9;
   left: 0; }
   .top-subnav li {
     display: block;
     float: left;
     padding: 0 12px; }
-    .top-subnav li:last-child {
-      -webkit-box-shadow: 25px 0px 10px -10px #454545;
-      -moz-box-shadow: 25px 0px 10px -10px #454545;
-      box-shadow: 25px 0px 10px -10px #454545; }
 
 .top-subnav a {
   padding: 9px 1px; }
-  .top-subnav a:link {
+  .top-subnav a:link, .top-nav li.selected li a:link {
     color: rgba(255, 255, 255, 0.75); }
-  .top-subnav a:visited {
+  .top-subnav a:visited, .top-nav li.selected li a:visited {
     color: rgba(255, 255, 255, 0.75); }
-  .top-subnav a:hover {
+  .top-subnav a:hover, .top-nav li.selected li a:hover {
     color: white; }
-  .top-subnav a:focus {
+  .top-subnav a:focus, .top-nav li.selected li a:focus {
     color: white; }
-  .top-subnav a:active {
+  .top-subnav a:active, .top-nav li.selected li a:active {
     color: white; }
   .top-subnav a.selected, .top-subnav .calendar a.selected:hover, .calendar .top-subnav a.selected:hover {
     color: white;
-    padding: 9px 1px 6px 1px;
+    padding: 9px 1px 5px 1px;
     border-bottom: 3px solid #787878; }
 
 .arrow-up {
@@ -1200,7 +1196,7 @@ button {
   top: 13px;
   right: 8px;
   width: 24px;
-  min-height: 22px;
+  height: 22px;
   padding: 0;
   opacity: 0.75;
   filter: alpha(opacity=75);
@@ -2420,9 +2416,11 @@ tr.cursor-move td * {
   position: relative;
   display: inline-block; }
 
-.server-name {
+.logo span { /* server-name */
+  position: absolute;
+  margin-top: 28px;
+  right: 15px;
   color: #737373;
-  float: right;
   white-space: nowrap;
   overflow: hidden; }
 
