Render navigation dropdown options as links instead of buttons. (#17876)

graylog2-web-interface/src/components/navigation/NavigationLink.tsx

@@ -16,11 +16,19 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 
 import Menu from 'components/bootstrap/Menu';
 import { LinkContainer } from 'components/common/router';
 import { NavItem } from 'components/bootstrap';
 
+const DropdownOption = styled(Menu.Item)`
+  &:hover, &:focus {
+    color: inherit;
+    text-decoration: none;
+  }
+`;
+
 // We render a NavItem if topLevel is set to avoid errors when the NavigationLink is place in the navigation
 // bar instead of a navigation drop-down menu.
 type Props = {
@@ -31,7 +39,7 @@ type Props = {
 
 const NavigationLink = ({ description, path, topLevel, ...rest }: Props) => (
   <LinkContainer key={path} to={path} {...rest}>
-    {topLevel ? <NavItem>{description}</NavItem> : <Menu.Item>{description}</Menu.Item>}
+    {topLevel ? <NavItem>{description}</NavItem> : <DropdownOption component="a">{description}</DropdownOption>}
   </LinkContainer>
 );