title: Target another component on hover using emotion-js
body: <p>I understand this is very similar to <a href="https://stackoverflow.com/questions/41007060/target-another-styled-component-on-hover">Target another styled component on hover</a></p>
  
  <p>However I would like to achieve the same effect with emotion-js</p>
  
  <p>More specifically I am trying to recreate <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover" rel="nofollow noreferrer">this</a> example using emotion styled components </p>
  
  <p>Here is my code and what I have tried. </p>
  
  <pre><code>import React from 'react';
  import styled from '@emotion/styled';
  import { Link } from 'gatsby';
  
  const Dropdown = styled.div`
    postition: relative;
    display: inline-block;
  `;
  
  const Button = styled.div`
    background-color: green;
    color: white;
    &amp;:hover {
      ${DropDownContent} {
        display: block;
      }
    }
  `;
  
  const DropDownContent = styled.div`
    display: none;
    position: absolute;
  `;
  
  const DropDownMenu = () =&gt; {
    return (
      &lt;Dropdown&gt;
        &lt;Button&gt;Dropdown&lt;/Button&gt;
        &lt;DropDownContent&gt;
          &lt;Link to="/"&gt;Link 1&lt;/Link&gt;
        &lt;/DropDownContent&gt;
      &lt;/Dropdown&gt;
    );
  };
  
  export default DropDownMenu;
  </code></pre>
  
  <p>I would like the link to show up when I hover the button, but that is not working and I cannot figure out why</p>