Hover main menu
Navigation
Desktop
In the Hover state, the corresponding main menu item is initially displayed in Active Red.
Then a line in Active Red will appear below the menu item from the left and the flyout menu will open from the top. The flyout menu is separated from the background color of the content area at the side and bottom by a line in #F7F7F7 with a width of 1 px.
The submenu items also change to Active Red on hover.
Mobile
The main navigation of the mobile header opens by simply tapping on the menu icon. If the users taps on a menu item in the first content level, the corresponding second content level opens. A link leads back to the higher level. If the search function is not displayed as an icon in the mobile header, it is displayed at the bottom of the menu.
From left to right: menu icon, 1st level menu, 2nd level menu, 3rd level menu