diff --git a/packages/menus/package.json b/packages/menus/package.json
index 594c5e276a6..67f22801ff8 100644
--- a/packages/menus/package.json
+++ b/packages/menus/package.json
@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "@zendeskgarden/css-arrows": "3.1.1",
-    "@zendeskgarden/css-menus": "7.1.0",
+    "@zendeskgarden/css-menus": "8.0.2",
     "@zendeskgarden/css-variables": "5.1.1",
     "@zendeskgarden/react-theming": "^3.1.3",
     "@zendeskgarden/svg-icons": "4.4.5"
diff --git a/packages/menus/src/containers/MenuContainer.example.md b/packages/menus/src/containers/MenuContainer.example.md
index 6d953334f32..9fd2d9ba0b5 100644
--- a/packages/menus/src/containers/MenuContainer.example.md
+++ b/packages/menus/src/containers/MenuContainer.example.md
@@ -240,9 +240,7 @@ initialState = {
         placement="end"
         onChange={selectedKey => setState({ selectedKey })}
         trigger={({ getTriggerProps, triggerRef, isOpen }) => (
-          <button {...getTriggerProps({ ref: triggerRef, active: isOpen })}>
-            Heavily customized menu
-          </button>
+          <button {...getTriggerProps({ ref: triggerRef })}>Heavily customized menu</button>
         )}
       >
         {({ getMenuProps, menuRef, placement, getItemProps, focusedKey }) => (
diff --git a/packages/menus/src/containers/MenuContainer.js b/packages/menus/src/containers/MenuContainer.js
index f615680ebd1..b87e9f9107d 100644
--- a/packages/menus/src/containers/MenuContainer.js
+++ b/packages/menus/src/containers/MenuContainer.js
@@ -406,7 +406,7 @@ class MenuContainer extends ControlledComponent {
   /**
    * Props to be applied to each selectable menu item
    **/
-  getItemProps = ({ key, role = 'menuitemcheckbox', textValue, ...other }) => {
+  getItemProps = ({ key, role = 'menuitemcheckbox', textValue, onMouseMove, ...other }) => {
     const { focusedKey } = this.getControlledState();
 
     if (typeof textValue === 'string' && textValue.length > 0) {
@@ -434,6 +434,16 @@ class MenuContainer extends ControlledComponent {
     return {
       key,
       role,
+      /**
+       * onMouseMove is used as it is only triggered by actual mouse movement
+       */
+      onMouseMove: composeEventHandlers(onMouseMove, () => {
+        if (key !== focusedKey) {
+          this.setControlledState({
+            focusedKey: key
+          });
+        }
+      }),
       ...other
     };
   };
diff --git a/packages/menus/src/containers/MenuContainer.spec.js b/packages/menus/src/containers/MenuContainer.spec.js
index 3316a8e4a58..d0d70e68f89 100644
--- a/packages/menus/src/containers/MenuContainer.spec.js
+++ b/packages/menus/src/containers/MenuContainer.spec.js
@@ -493,6 +493,16 @@ describe('MenuContainer', () => {
     it('applies correct accessibility role', () => {
       expect(findMenuItems(wrapper).first()).toHaveProp('role', 'menuitemcheckbox');
     });
+
+    it('focuses correct item if mouseMoved', () => {
+      findMenuItems(wrapper)
+        .first()
+        .simulate('mousemove');
+
+      wrapper.update();
+
+      expect(findMenuItems(wrapper).first()).toHaveProp('data-focused', true);
+    });
   });
 
   describe('getNextItemProps()', () => {
diff --git a/packages/menus/src/views/items/Item.example.md b/packages/menus/src/views/items/Item.example.md
index e188f78e7da..d85e22d8a75 100644
--- a/packages/menus/src/views/items/Item.example.md
+++ b/packages/menus/src/views/items/Item.example.md
@@ -60,7 +60,7 @@ const InlineMenuView = styled(MenuView)`
     </Col>
     <Col md>
       <InlineMenuView>
-        <HeaderItem>
+        <HeaderItem containsIcon>
           <HeaderIcon>
             <GroupIcon />
           </HeaderIcon>
diff --git a/packages/menus/src/views/items/Item.js b/packages/menus/src/views/items/Item.js
index e593dfb44ba..af19e3dd34c 100644
--- a/packages/menus/src/views/items/Item.js
+++ b/packages/menus/src/views/items/Item.js
@@ -29,7 +29,16 @@ const Item = styled.li.attrs({
       [MenuStyles['is-checked']]: props.checked
     })
 })`
+  /* stylelint-disable */
+  ${props =>
+    !props.focused &&
+    `&&&:hover {
+      background-color: inherit;
+    }
+  `};
+
   ${props => retrieveTheme(COMPONENT_ID, props)};
+  /* stylelint-enable */
 `;
 
 Item.propTypes = {
diff --git a/packages/menus/src/views/items/__snapshots__/Item.spec.js.snap b/packages/menus/src/views/items/__snapshots__/Item.spec.js.snap
index df8c64243c8..ab5126e219b 100644
--- a/packages/menus/src/views/items/__snapshots__/Item.spec.js.snap
+++ b/packages/menus/src/views/items/__snapshots__/Item.spec.js.snap
@@ -1,33 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Item renders active styling 1`] = `
+.c0.c0.c0:hover {
+  background-color: inherit;
+}
+
 <li
-  className="c-menu__item is-active "
+  className="c-menu__item is-active c0"
   data-garden-id="menus.item"
   data-garden-version="version"
 />
 `;
 
 exports[`Item renders checked styling 1`] = `
+.c0.c0.c0:hover {
+  background-color: inherit;
+}
+
 <li
   checked={true}
-  className="c-menu__item is-checked "
+  className="c-menu__item is-checked c0"
   data-garden-id="menus.item"
   data-garden-version="version"
 />
 `;
 
 exports[`Item renders default styling 1`] = `
+.c0.c0.c0:hover {
+  background-color: inherit;
+}
+
 <li
-  className="c-menu__item "
+  className="c-menu__item c0"
   data-garden-id="menus.item"
   data-garden-version="version"
 />
 `;
 
 exports[`Item renders disabled styling 1`] = `
+.c0.c0.c0:hover {
+  background-color: inherit;
+}
+
 <li
-  className="c-menu__item is-disabled "
+  className="c-menu__item is-disabled c0"
   data-garden-id="menus.item"
   data-garden-version="version"
   disabled={true}
@@ -43,8 +59,12 @@ exports[`Item renders focused styling 1`] = `
 `;
 
 exports[`Item renders hovered styling 1`] = `
+.c0.c0.c0:hover {
+  background-color: inherit;
+}
+
 <li
-  className="c-menu__item is-hovered "
+  className="c-menu__item is-hovered c0"
   data-garden-id="menus.item"
   data-garden-version="version"
 />
diff --git a/packages/menus/src/views/items/header/HeaderItem.js b/packages/menus/src/views/items/header/HeaderItem.js
index 7cd605366c9..8b5fece9f67 100644
--- a/packages/menus/src/views/items/header/HeaderItem.js
+++ b/packages/menus/src/views/items/header/HeaderItem.js
@@ -6,6 +6,7 @@
  */
 
 import PropTypes from 'prop-types';
+import className from 'classnames';
 import styled from 'styled-components';
 import { retrieveTheme } from '@zendeskgarden/react-theming';
 import MenuStyles from '@zendeskgarden/css-menus';
@@ -20,7 +21,10 @@ const COMPONENT_ID = 'menus.header_item';
 const HeaderItem = styled(Item).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
-  className: MenuStyles['c-menu__item--header']
+  className: props =>
+    className(MenuStyles['c-menu__item--header'], {
+      [MenuStyles['c-menu__item--header--icon']]: props.containsIcon
+    })
 })`
   ${props => retrieveTheme(COMPONENT_ID, props)};
 `;
@@ -30,7 +34,9 @@ HeaderItem.propTypes = {
   focused: PropTypes.bool,
   hovered: PropTypes.bool,
   disabled: PropTypes.bool,
-  checked: PropTypes.bool
+  checked: PropTypes.bool,
+  /** Applies icon styling */
+  containsIcon: PropTypes.bool
 };
 
 HeaderItem.hasType = () => HeaderItem;
diff --git a/packages/menus/src/views/items/header/HeaderItem.spec.js b/packages/menus/src/views/items/header/HeaderItem.spec.js
index 98d519a1f31..81b26ece3e0 100644
--- a/packages/menus/src/views/items/header/HeaderItem.spec.js
+++ b/packages/menus/src/views/items/header/HeaderItem.spec.js
@@ -15,4 +15,14 @@ describe('HeaderItem', () => {
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('renders icon styling if provided', () => {
+    const wrapper = shallow(
+      <HeaderItem containsIcon>
+        <svg />
+      </HeaderItem>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
 });
diff --git a/packages/menus/src/views/items/header/__snapshots__/HeaderItem.spec.js.snap b/packages/menus/src/views/items/header/__snapshots__/HeaderItem.spec.js.snap
index 7f059569b2d..4a2d66f5918 100644
--- a/packages/menus/src/views/items/header/__snapshots__/HeaderItem.spec.js.snap
+++ b/packages/menus/src/views/items/header/__snapshots__/HeaderItem.spec.js.snap
@@ -7,3 +7,14 @@ exports[`HeaderItem renders default styling 1`] = `
   data-garden-version="version"
 />
 `;
+
+exports[`HeaderItem renders icon styling if provided 1`] = `
+<Item
+  className="c-menu__item--header c-menu__item--header--icon "
+  containsIcon={true}
+  data-garden-id="menus.header_item"
+  data-garden-version="version"
+>
+  <svg />
+</Item>
+`;
diff --git a/packages/select/src/views/Dropdown.example.md b/packages/select/src/views/Dropdown.example.md
index 41d2669c104..ec1f202ce54 100644
--- a/packages/select/src/views/Dropdown.example.md
+++ b/packages/select/src/views/Dropdown.example.md
@@ -60,7 +60,7 @@ const InlineSelectView = styled(Dropdown)`
     </Col>
     <Col md>
       <InlineSelectView>
-        <HeaderItem>
+        <HeaderItem containsIcon>
           <HeaderIcon>
             <GroupIcon />
           </HeaderIcon>