I have a below structure.
<Nav>
<Title/>
<DropDown />
</Nav>
<Nav />
is a class component and I need to show Dropdown when I hover over <Nav />
.
Here is the code snippet of <Nav />
.
export default class HeaderLink extends React.PureComponent {
...
}
Here is the code snippet of <DropDown />
.
const Container = styled.ul`
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all .3s ease-in-out;
${Nav}:hover & {
opacity: 1;
visibility: visible;
transform: translateY(-2px);
}
`;
const DropDown = ({ items }) => (
<Container>
{items.map(({ title, url }) => (
<a href={url}>{title}</a>
))}
</Container>
);
DropDown.propTypes = {
items: PropTypes.array.isRequired
};
export default DropDown;
This is not working but I figured that If I define <Nav />
component as a styled-component, it works
i.e. const Nav = styled.ul''
But it's not working for the class component.
Any thoughts on this?
Thanks.