import * as React from 'react'; import Head from 'next/head'; import { Spacer } from '@1milligram/design'; import { RelatedPatterns } from '../../components/RelatedPatterns'; import { Pattern } from '../../constants/Pattern'; import { PatternLayout } from '../../layouts/PatternLayout'; import Block from '../../placeholders/Block'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Rectangle from '../../placeholders/Rectangle'; import Triangle from '../../placeholders/Triangle'; const Details: React.FC<{}> = () => { return (
Move the mouse over the button to see the dropdown.
...
`} css={` .dropdown { position: relative; } /* Hide the dropdown's content by default */ .dropdown__content { display: none; /* Position it right below the trigger element */ left: 0; paddingtop: 4px; position: absolute; top: 100%; /* It should be on the top of other elements */ background-color: #fff; zindex: 9999; /* Size */ height: 200px; width: 200px; } /* Show the content when hover on the container */ .dropdown:hover .dropdown__content { display: block; } `} >
); }; export default Details;