/** * A collection of popular layouts and patterns made with CSS (https://csslayout.io) * (c) 2019 - 2021 Nguyen Huu Phuoc */ import * as React from 'react'; import Head from 'next/head'; import { RelatedPatterns } from '../../components/RelatedPatterns'; import { Pattern } from '../../constants/Pattern'; import { DetailsLayout } from '../../layouts/DetailsLayout'; 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;