# This patch file was generated by NetBeans IDE
# Following Index: paths are relative to: /var/www/html/zabbix/branches/dev/ZBXNEXT-3322-trunk
# This patch can be applied using context Tools: Patch action on respective folder.
# It uses platform neutral UTF-8 encoding and \n newlines.
# Above lines and this line are ignored by the patching process.
Index: frontends/php/include/classes/html/widget/CHeaderMenuWidget.php
--- frontends/php/include/classes/html/widget/CHeaderMenuWidget.php Base (BASE)
+++ frontends/php/include/classes/html/widget/CHeaderMenuWidget.php Locally Modified (Based On LOCAL)
@@ -83,38 +83,35 @@
 	/**
 	 * Create dropdown menu in title.
 	 *
-	 * @return CDiv
+	 * @return CTag of tagname <nav>
 	 */
 	private function createTitle() {
-		$list = (new CList())
-			->addClass(ZBX_STYLE_HEADER_DROPDOWN_LIST)
-			->setAttribute('tabindex', '0')
-			->setAttribute('role', 'menu')
-			->setId($this->header_menuid);
+		$selected_title = null;
+		$header_menu = [];
 
-		$header_button = null;
-
 		foreach ($this->menu_map as $item) {
+			$title = array_key_exists('menu_name', $item) ? $item['menu_name'] : $item['title'];
+			$header_menu[] = [
+				'label' => $title,
+				'url' => $item['url']
+			];
+
 			if ($item['selected']) {
-				$header_button = (new CButton('content-header', $item['title']))
+				$selected_title = $title;
+			}
+		}
+
+		$header_button = $selected_title
+			? (new CButton('content-header', $selected_title))
 					->addClass(ZBX_STYLE_HEADER_DROPDOWN)
 					->setAttribute('data-dropdown-list', '#'.$this->header_menuid)
 					->setAttribute('aria-haspopup', 'true')
-					->setAttribute('aria-expanded', 'false');
-			}
-			$title = array_key_exists('menu_name', $item) ? $item['menu_name'] : $item['title'];
+				->setAttribute('aria-expanded', 'false')
+				->setAttribute('data-dropdown-list', [['items' => $header_menu]])
+			: null;
 
-			$list->addItem((new CLink($title, $item['url']))
-				->addClass(ZBX_STYLE_ACTION_MENU_ITEM)
-				->setAttribute('role', 'menuitem')
-				->setAttribute('tabindex', '-1')
-				->setAttribute('aria-label', $title)
-			);
-		}
-
 		return (new CTag('nav', true))
 			->addItem($header_button)
-			->addItem($list)
 			->setAttribute('aria-label', _('Content controls: header'));
 	}
 }
Index: frontends/php/js/init.js
--- frontends/php/js/init.js Base (BASE)
+++ frontends/php/js/init.js Locally Modified (Based On LOCAL)
@@ -49,102 +49,12 @@
 		changeClass(comboBox);
 	});
 
-	$('[data-dropdown-list]').click(function () {
+	$('[data-dropdown-list]').on('click', function(event) {
 		var button = $(this),
-			menu = $(button.data('dropdown-list')),
-			closeMenu = function() {
-				$(document).off('click', closeMenu);
-				$(document).off('keydown', keydownHandler);
-				button.attr('aria-expanded', 'false');
-				$('.highlighted', menu).removeClass('highlighted');
-				menu.hide();
-			},
-			keydownHandler = function(event) {
-				// Select menu items.
-				var items = $('>li', menu).filter(function() {
-						return $(this).has('.action-menu-item').length;
-					});
+			data = button.data('dropdown-list');
 
-				// Find active menu item.
-				if ($('.action-menu-item.highlighted', menu).length) {
-					var selected = $('.action-menu-item.highlighted', menu).parent();
-				}
-				else if ($('.action-menu-item', menu).filter(function() {
-					return this == document.activeElement;
-				}).length) {
-					var selected = $(document.activeElement).parent();
-				}
-
-				// Perform action based on keydown event.
-				switch (event.which) {
-					case 38: // arrow up
-						if (typeof selected === 'undefined') {
-							$('.action-menu-item:last', menu).addClass('highlighted').focus();
-						}
-						else {
-							var prev = items[items.index(selected) - 1];
-							if (typeof prev === 'undefined') {
-								prev = items[items.length - 1];
-							}
-
-							$('.action-menu-item', selected).removeClass('highlighted');
-							$('.action-menu-item:first', prev).addClass('highlighted').focus();
-						}
-
-						// Prevent page scrolling.
-						event.preventDefault();
-						break;
-
-					case 40: // arrow down
-						if (typeof selected === 'undefined') {
-							$('.action-menu-item:first', items[0]).addClass('highlighted').focus();
-						}
-						else {
-							var next = items[items.index(selected) + 1];
-							if (typeof next === 'undefined') {
-								next = items[0];
-							}
-
-							$('.action-menu-item', selected).removeClass('highlighted');
-							$('.action-menu-item:first', next).addClass('highlighted').focus();
-						}
-
-						// Prevent page scrolling.
-						event.preventDefault();
-						break;
-
-					case 27: // ESC
-						closeMenu();
-						break;
-
-					case 13: // Enter
-						if (typeof selected !== 'undefined') {
-							$('> .action-menu-item', selected)[0].click();
-						}
-						else {
-							closeMenu();
-						}
-						break;
-
-					case 9: // Tab
-						event.preventDefault();
-						break;
-				}
-
+		button.menuPopup(data, event, {'position': 'under', 'class': 'header-dropdown-list'});
 				return false;
-			};
-
-		if (menu.not(':visible')) {
-			$(document).on('click', closeMenu);
-			$(document).on('keydown', keydownHandler);
-			button.attr('aria-expanded', 'true');
-			menu.show();
-		}
-		else {
-			closeMenu();
-		}
-
-		return false;
 	});
 
 	/**
Index: frontends/php/js/menupopup.js
--- frontends/php/js/menupopup.js Base (BASE)
+++ frontends/php/js/menupopup.js Locally Modified (Based On LOCAL)
@@ -1050,12 +1050,13 @@
 	};
 
 	var methods = {
-		init: function(sections, event) {
+		init: function(sections, event, options) {
 			var opener = $(this),
 				id = opener.data('menu-popup-id'),
 				menuPopup = $('#' + id),
 				mapContainer = null,
-				target = event.target;
+				target = event.target,
+				options = options || {};
 
 			if (event.type === 'contextmenu' || (IE && opener.closest('svg').length > 0)
 					|| event.originalEvent.detail !== 0) {
@@ -1078,12 +1079,20 @@
 					menuPopup.fadeIn(50);
 				}
 
+				if (typeof options.position !== 'undefined' && options.position === 'under') {
+					menuPopup.css({
+						'left': opener.offset().left,
+						'top': opener.offset().top + opener.height()
+					});
+				}
+				else {
 				menuPopup.position({
 					of: target,
 					my: 'left top',
 					at: 'left bottom'
 				});
 			}
+			}
 			else {
 				id = new Date().getTime();
 
@@ -1092,7 +1101,8 @@
 					'role': 'menu',
 					'class': 'action-menu action-menu-top',
 					'tabindex': 0
-				});
+				})
+						.data('opener', opener);
 
 				// create sections
 				var sections_length = sections.length;
@@ -1164,14 +1174,31 @@
 					})
 					.on('click', function(e) {
 						e.stopPropagation();
-					})
-					.position({
+					});
+
+				if (typeof options.class !== 'undefined') {
+					menuPopup.addClass(options.class);
+				}
+
+				if (typeof options.position !== 'undefined' && options.position === 'under') {
+					menuPopup.css({
+						'left': opener.offset().left,
+						'top': opener.offset().top + opener.height()
+					});
+				}
+				else {
+					menuPopup.position({
 						of: (opener.prop('tagName') === 'AREA') ? mapContainer : target,
 						my: 'left top',
 						at: 'left bottom'
-					});
+					})
 			}
+			}
 
+			if (typeof opener.attr('aria-expanded') !== 'undefined') {
+				opener.attr({'aria-expanded': 'true'});
+			}
+
 			addToOverlaysStack('contextmenu', event.target, 'contextmenu');
 
 			$(document)
@@ -1181,11 +1208,17 @@
 			menuPopup.focus();
 		},
 		close: function(trigger_elmnt, return_focus) {
-			var menuPopup = $(this);
+			var menuPopup = $(this),
+				opener = menuPopup.data('opener');
+
 			if (!menuPopup.is(trigger_elmnt) && menuPopup.has(trigger_elmnt).length === 0) {
 				menuPopup.data('is-active', false);
 				menuPopup.fadeOut(0);
 
+				if (typeof jQuery(opener).attr('aria-expanded') !== 'undefined') {
+					jQuery(opener).attr({'aria-expanded': 'false'});
+				}
+
 				$('.highlighted', menuPopup).removeClass('highlighted');
 				$('[aria-expanded="true"]', menuPopup).attr({'aria-expanded': 'false'});
 
Index: sass/stylesheets/sass/screen.scss
--- sass/stylesheets/sass/screen.scss Base (BASE)
+++ sass/stylesheets/sass/screen.scss Locally Modified (Based On LOCAL)
@@ -616,14 +616,12 @@
 			text-decoration: underline;
 		}
 	}
+}
 
 	.header-dropdown-list {
-		@extend .action-menu;
-		display: none;
-		top: 32px;
-		left: -8px;
 		font-size: $font-h4-size;
 		text-align: left;
+    margin: 7px 0 0 -8px;
 
 		&::before, &::after {
 			content: '';
@@ -646,7 +644,6 @@
 			padding: 0;
 		}
 	}
-}
 
 // Article
 article {
