styled components child hover

App.js

import React from "react";
import styled from "styled-components";

const NavBar = styled.div`
  background-color: cornflowerblue;
  padding: 1rem;
`;

const FlyoutMenu = styled.div`
  background-color: limegreen;
  visibility: hidden;
`;

const NavBarMenuItem = styled.div`
  background-color: #f09;
  &:hover ${FlyoutMenu} {
    visibility: visible;
  }
`;

const NavBarMenuItemLink = props => {
  return <a href={props.to}>{props.title}</a>;
};

const FlyoutMenuItem = props => {
  return <a href={props.to}>{props.title}</a>;
};

function App() {
  return (
    <>
      <NavBar>
        <NavBarMenuItem>
          <NavBarMenuItemLink
            to="/foo"
            title="Menu item 1"
          ></NavBarMenuItemLink>
          <FlyoutMenu>
            <FlyoutMenuItem to="/bar" title="Sub menu item 1"></FlyoutMenuItem>
            <FlyoutMenuItem to="/bar" title="Sub menu item 2"></FlyoutMenuItem>
            <FlyoutMenuItem to="/bar" title="Sub menu item 3"></FlyoutMenuItem>
            <FlyoutMenuItem to="/bar" title="Sub menu item 4"></FlyoutMenuItem>
          </FlyoutMenu>
        </NavBarMenuItem>
      </NavBar>
    </>
  );
}

export default App;