diff --git a/contents/_includes/covers/dropdown.njk b/contents/_includes/covers/dropdown.njk
new file mode 100644
index 0000000..34777ec
--- /dev/null
+++ b/contents/_includes/covers/dropdown.njk
@@ -0,0 +1,9 @@
+
+
+ {% rectangle %}
+ {% triangle "b" %}
+
+
+
{% lines "hor", 5 %}
+
+
\ No newline at end of file
diff --git a/contents/dropdown.md b/contents/dropdown.md
new file mode 100644
index 0000000..754ce14
--- /dev/null
+++ b/contents/dropdown.md
@@ -0,0 +1,60 @@
+---
+layout: layouts/post.njk
+title: Dropdown
+description: Create a dropdown with CSS
+keywords: css dropdown, css menu
+---
+
+## HTML
+
+```html
+
+
+
+ ...
+
+
+
+
+ ...
+
+
+```
+
+## CSS
+
+```css
+ .dropdown {
+ position: relative;
+}
+
+.dropdown__trigger {
+ cursor: pointer;
+}
+
+/* Hide the dropdown's content by default */
+.dropdown__content {
+ display: none;
+
+ /* Position it right below the trigger element */
+ left: 0;
+ padding-top: 0.25rem;
+ position: absolute;
+ top: 100%;
+
+ /* It should be on the top of other elements */
+ background-color: #fff;
+ z-index: 9999;
+}
+
+/* Show the content when hover on the container */
+.dropdown:hover .dropdown__content {
+ display: block;
+}
+```
+
+You can use a [triangle button](/triangle-buttons/) to indicate that there is content under it.
+
+Move the mouse over the button to see the dropdown.
+
+{% demo %}{% include "covers/dropdown.njk" %}{% enddemo %}
diff --git a/contents/index.njk b/contents/index.njk
index 72570ec..eb76608 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -129,6 +129,7 @@ eleventyExcludeFromCollections: true
{% pattern "Circular navigation" %}{% include "covers/circular-navigation.njk" %}{% endpattern %}
{% pattern "Dot navigation" %}{% include "covers/dot-navigation.njk" %}{% endpattern %}
{% pattern "Drawer" %}{% include "covers/drawer.njk" %}{% endpattern %}
+ {% pattern "Dropdown" %}{% include "covers/dropdown.njk" %}{% endpattern %}
{% pattern "Full screen menu" %}{% include "covers/full-screen-menu.njk" %}{% endpattern %}
{% pattern "Menu" %}{% include "covers/menu.njk" %}{% endpattern %}
{% pattern "Pagination" %}{% include "covers/pagination.njk" %}{% endpattern %}
diff --git a/pages/dropdown/index.tsx b/pages/dropdown/index.tsx
deleted file mode 100644
index 914763f..0000000
--- a/pages/dropdown/index.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-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;
- padding-top: 4px;
- position: absolute;
- top: 100%;
-
- /* It should be on the top of other elements */
- background-color: #fff;
- z-index: 9999;
-
- /* Size */
- height: 200px;
- width: 200px;
- }
-
- /* Show the content when hover on the container */
- .dropdown:hover .dropdown__content {
- display: block;
- }
- `}
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default Details;
diff --git a/patterns/dropdown/Cover.tsx b/patterns/dropdown/Cover.tsx
deleted file mode 100644
index ed02d65..0000000
--- a/patterns/dropdown/Cover.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Line from '../../placeholders/Line';
-import Triangle from '../../placeholders/Triangle';
-
-const Cover: React.FC<{}> = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index db4bf0e..f7a7c80 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -38,6 +38,7 @@
@import './patterns/drawer';
@import './patterns/drop-area';
@import './patterns/drop-cap';
+@import './patterns/dropdown';
@import './patterns/fading-long-section';
@import './patterns/feature-comparison';
@import './patterns/feature-list';
diff --git a/styles/patterns/_dropdown.scss b/styles/patterns/_dropdown.scss
new file mode 100644
index 0000000..f82df5c
--- /dev/null
+++ b/styles/patterns/_dropdown.scss
@@ -0,0 +1,53 @@
+.dropdown {
+ position: relative;
+
+ /* Demo */
+ width: 6rem;
+
+ align-items: flex-start;
+ display: flex;
+ justify-content: center;
+}
+
+.dropdown__trigger {
+ cursor: pointer;
+
+ /* Demo */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ height: 2rem;
+ width: 6rem;
+ padding: 0.25rem 0.5rem;
+
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+/* Hide the dropdown's content by default */
+.dropdown__content {
+ display: none;
+
+ /* Position it right below the trigger element */
+ left: 0;
+ padding-top: 0.25rem;
+ position: absolute;
+ top: 100%;
+
+ /* It should be on the top of other elements */
+ background-color: #fff;
+ z-index: 9999;
+}
+
+.dropdown__body {
+ /* Demo */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ height: 6rem;
+ width: 8rem;
+}
+
+/* Show the content when hover on the container */
+.dropdown:hover .dropdown__content {
+ display: block;
+}
\ No newline at end of file