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 second navigation item to see the mega menu.

...

`} css={` .container { /* Used to position the mega menu */ position: relative; } .container__trigger:hover .container__content { /* Show the mega menu when hovering the trigger item */ display: block; } .container__content { /* Border */ border: 1px solid rgba(0, 0, 0, 0.3); margin-top: -1px; /* Hidden by default */ display: none; /* Absolute position */ left: 0px; position: absolute; top: 100%; /* Take full width */ width: 100%; /* Displayed on top of other elements */ background: #fff; z-index: 9999; } `} >

); }; export default Details;