diff --git a/contents/_includes/covers/nested-dropdowns.njk b/contents/_includes/covers/nested-dropdowns.njk
new file mode 100644
index 0000000..713e04a
--- /dev/null
+++ b/contents/_includes/covers/nested-dropdowns.njk
@@ -0,0 +1,28 @@
+<ul class="nested-dropdowns">
+    <li>A</li>
+    <li>
+        <div class="nested-dropdowns__item">
+            B <div class="nested-dropdowns__arrow">{% triangle "b" %}</div>
+        </div>
+        <ul>
+            <li>B.1</li>
+            <li>B.2</li>
+            <li>
+                <div class="nested-dropdowns__item">
+                    B.3
+                    <div class="nested-dropdowns__arrow">{% triangle "r" %}</div>
+                </div>
+                <ul>
+                    <li>B.3.1</li>
+                    <li>B.3.2</li>
+                    <li>B.3.3</li>
+                    <li>B.3.4</li>
+                </ul>
+            </li>
+            <li>B.4</li>
+            <li>B.5</li>
+        </ul>
+    </li>
+    <li>C</li>
+    <li>D</li>
+</ul>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index dffecf9..b6600a3 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -133,6 +133,7 @@ eleventyExcludeFromCollections: true
             {% pattern "Full screen menu" %}{% include "covers/full-screen-menu.njk" %}{% endpattern %}
             {% pattern "Mega menu" %}{% include "covers/mega-menu.njk" %}{% endpattern %}
             {% pattern "Menu" %}{% include "covers/menu.njk" %}{% endpattern %}
+            {% pattern "Nested dropdowns" %}{% include "covers/nested-dropdowns.njk" %}{% endpattern %}
             {% pattern "Pagination" %}{% include "covers/pagination.njk" %}{% endpattern %}
             {% pattern "Previous next buttons" %}{% include "covers/previous-next-buttons.njk" %}{% endpattern %}
             {% pattern "Split navigation" %}{% include "covers/split-navigation.njk" %}{% endpattern %}
diff --git a/contents/nested-dropdowns.md b/contents/nested-dropdowns.md
new file mode 100644
index 0000000..370e738
--- /dev/null
+++ b/contents/nested-dropdowns.md
@@ -0,0 +1,102 @@
+---
+layout: layouts/post.njk
+title: Nested dropdowns
+description: Create nested dropdown menu with CSS
+keywords: css dropdown menu, css multi-level dropdown menu, css nested dropdown menu
+---
+
+## HTML
+
+```html
+<ul class="nested-dropdowns">
+    <li>A</li>
+    <li>
+        <div class="nested-dropdowns__item">
+            B <div class="nested-dropdowns__arrow">...</div>
+        </div>
+        <ul>
+            <li>B.1</li>
+            <li>B.2</li>
+            <li>
+                <div class="nested-dropdowns__item">
+                    B.3
+                    <div class="nested-dropdowns__arrow">...</div>
+                </div>
+                <ul>
+                    <li>B.3.1</li>
+                    <li>B.3.2</li>
+                    <li>B.3.3</li>
+                    <li>B.3.4</li>
+                </ul>
+            </li>
+            <li>B.4</li>
+            <li>B.5</li>
+        </ul>
+    </li>
+    <li>C</li>
+    <li>D</li>
+</ul>
+```
+
+## CSS
+
+```css
+.nested-dropdowns {
+    /* Border */
+    border: 1px solid #d1d5db;
+    display: flex;
+
+    /* Reset list styles */
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.nested-dropdowns li {
+    cursor: pointer;
+    
+    /* Spacing */
+    padding: 0.25rem;
+
+    /* Used to position the sub nested-dropdowns */
+    position: relative;
+}
+
+/* The sub nested-dropdowns */
+.nested-dropdowns ul {
+    /* Border */
+    border: 1px solid #d1d5db;
+
+    /* Hidden by default */
+    display: none;
+
+    /* Absolute position */
+    left: 0;
+    position: absolute;
+    top: 100%;
+
+    /* Reset styles */
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+/* The second level sub nested-dropdowns */
+.nested-dropdowns ul ul {
+    left: 100%;
+    position: absolute;
+    top: 0;
+}
+
+/* Change background color of list item when being hovered */
+.nested-dropdowns li:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Show the direct sub nested-dropdowns when hovering the list item */
+.nested-dropdowns li:hover > ul {
+    display: block;
+}
+```
+
+{% demo %}{% include "covers/nested-dropdowns.njk" %}{% enddemo %}
diff --git a/pages/nested-dropdowns/index.tsx b/pages/nested-dropdowns/index.tsx
deleted file mode 100644
index a512976..0000000
--- a/pages/nested-dropdowns/index.tsx
+++ /dev/null
@@ -1,149 +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 BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.NestedDropdowns}>
-            <Head>
-                <meta name="description" content="Create nested dropdown menu with CSS" />
-                <meta name="og:description" content="Create nested dropdown menu with CSS" />
-                <meta name="twitter:description" content="Create nested dropdown menu with CSS" />
-                <meta
-                    name="keywords"
-                    content="css dropdown menu, css multi-level dropdown menu, css nested dropdown menu"
-                />
-            </Head>
-            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                Hover on the Patterns &rarr; Navigation to see the sub dropdowns.
-            </div>
-            <BrowserFrame
-                html={`
-<ul class="dropdown">
-    <li>Home</li>
-    <li>
-        <div>Patterns</div>
-        <!-- First level sub dropdown -->
-        <ul>
-            <li>Layout</li>
-            <li>Input</li>
-            <li>
-                <div>Navigation</div>
-                <!-- Second level sub dropdown -->
-                <ul>
-                    <li>Breadcrumb</li>
-                    <li>Dropdown</li>
-                    <li>Menu</li>
-                    <li>Nested dropdown</li>
-                </ul>
-            </li>
-            <li>Display</li>
-            <li>Feedback</li>
-        </ul>
-    </li>
-    <li>Products</li>
-    <li>About</li>
-</ul>
-`}
-                css={`
-                    .dropdown {
-                        /* Border */
-                        border: 1px solid #d1d5db;
-                        display: flex;
-
-                        /* Reset list styles */
-                        list-style-type: none;
-                        margin: 0;
-                        padding: 0;
-                    }
-
-                    .dropdown li {
-                        /* Spacing */
-                        padding: 8px;
-
-                        /* Used to position the sub dropdown */
-                        position: relative;
-                    }
-
-                    /* The sub dropdown */
-                    .dropdown ul {
-                        /* Border */
-                        border: 1px solid #d1d5db;
-
-                        /* Hidden by default */
-                        display: none;
-
-                        /* Absolute position */
-                        left: 0;
-                        position: absolute;
-                        top: 100%;
-
-                        /* Reset styles */
-                        list-style-type: none;
-                        margin: 0;
-                        padding: 0;
-
-                        /* Width */
-                        width: 200px;
-                    }
-
-                    /* The second level sub dropdown */
-                    .dropdown ul ul {
-                        left: 100%;
-                        position: absolute;
-                        top: 0;
-                    }
-
-                    /* Change background color of list item when being hovered */
-                    .dropdown li:hover {
-                        background-color: rgba(0, 0, 0, 0.1);
-                    }
-
-                    /* Show the direct sub dropdown when hovering the list item */
-                    .dropdown li:hover > ul {
-                        display: block;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        padding: '8px',
-                    }}
-                >
-                    <ul className="p-nested-dropdowns">
-                        <li>Home</li>
-                        <li>
-                            <div>Patterns</div>
-                            <ul>
-                                <li>Layout</li>
-                                <li>Input</li>
-                                <li>
-                                    <div>Navigation</div>
-                                    <ul>
-                                        <li>Breadcrumb</li>
-                                        <li>Dropdown</li>
-                                        <li>Menu</li>
-                                        <li>Nested dropdown</li>
-                                    </ul>
-                                </li>
-                                <li>Display</li>
-                                <li>Feedback</li>
-                            </ul>
-                        </li>
-                        <li>Products</li>
-                        <li>About</li>
-                    </ul>
-                </div>
-            </BrowserFrame>
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/nested-dropdowns/Cover.tsx b/patterns/nested-dropdowns/Cover.tsx
deleted file mode 100644
index 989d992..0000000
--- a/patterns/nested-dropdowns/Cover.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as React from 'react';
-
-import Circle from '../../placeholders/Circle';
-import Frame from '../../placeholders/Frame';
-import Line from '../../placeholders/Line';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '8px',
-                }}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        border: '1px solid #d1d5db',
-                        display: 'flex',
-                        justifyContent: 'center',
-                    }}
-                >
-                    <div
-                        style={{
-                            flex: 1,
-                            padding: '4px 8px',
-                        }}
-                    >
-                        <Circle size={8} />
-                    </div>
-                    <div
-                        style={{
-                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                            flex: 1,
-                            padding: '4px 8px',
-                            position: 'relative',
-                        }}
-                    >
-                        <Circle size={8} />
-                        <div
-                            style={{
-                                border: '1px solid #d1d5db',
-                                borderTopColor: 'transparent',
-                                left: 0,
-                                padding: '4px',
-                                position: 'absolute',
-                                top: '100%',
-                                width: '100%',
-                            }}
-                        >
-                            <div style={{ marginBottom: '4px' }}>
-                                <Line />
-                            </div>
-                            <div style={{ marginBottom: '4px', width: '60%' }}>
-                                <Line />
-                            </div>
-                            <div style={{ marginBottom: '4px' }}>
-                                <Line />
-                            </div>
-                            <div style={{ width: '80%' }}>
-                                <Line />
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        style={{
-                            flex: 1,
-                            padding: '4px 8px',
-                        }}
-                    >
-                        <Circle size={8} />
-                    </div>
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index 4d0c851..f7a667e 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -60,6 +60,7 @@
 @import './patterns/mega-menu';
 @import './patterns/menu';
 @import './patterns/modal';
+@import './patterns/nested-dropdowns';
 @import './patterns/notification';
 @import './patterns/overlay-play-button';
 @import './patterns/pagination';
diff --git a/styles/patterns/_nested-dropdowns.scss b/styles/patterns/_nested-dropdowns.scss
new file mode 100644
index 0000000..7329ef1
--- /dev/null
+++ b/styles/patterns/_nested-dropdowns.scss
@@ -0,0 +1,65 @@
+.nested-dropdowns {
+    /* Border */
+    border: 1px solid #d1d5db;
+    display: flex;
+
+    /* Reset list styles */
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.nested-dropdowns li {
+    cursor: pointer;
+    
+    /* Spacing */
+    padding: 0.25rem;
+
+    /* Used to position the sub nested-dropdowns */
+    position: relative;
+}
+
+/* The sub nested-dropdowns */
+.nested-dropdowns ul {
+    /* Border */
+    border: 1px solid #d1d5db;
+
+    /* Hidden by default */
+    display: none;
+
+    /* Absolute position */
+    left: 0;
+    position: absolute;
+    top: 100%;
+
+    /* Reset styles */
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+/* The second level sub nested-dropdowns */
+.nested-dropdowns ul ul {
+    left: 100%;
+    position: absolute;
+    top: 0;
+}
+
+/* Change background color of list item when being hovered */
+.nested-dropdowns li:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Show the direct sub nested-dropdowns when hovering the list item */
+.nested-dropdowns li:hover > ul {
+    display: block;
+}
+
+/* Demo */
+.nested-dropdowns__item {
+    align-items: center;
+    display: flex;
+}
+.nested-dropdowns__arrow {
+    margin-left: 0.25rem;
+}
\ No newline at end of file