Add nested dropdowns pattern

client/constants/Pattern.ts

@@ -43,6 +43,7 @@ enum Pattern {
     MegaMenu = 'Mega menu',
     Menu = 'Menu',
     Modal = 'Modal',
+    NestedDropdowns = 'Nested dropdowns',
     Notification = 'Notification',
     OverlayPlayButton = 'Overlay play button',
     Pagination = 'Pagination',

client/pages/ExplorePage.tsx

@@ -111,6 +111,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.FullScreenMenu} />
                         <CoverCard pattern={Pattern.MegaMenu} />
                         <CoverCard pattern={Pattern.Menu} />
+                        <CoverCard pattern={Pattern.NestedDropdowns} />
                         <CoverCard pattern={Pattern.Pagination} />
                         <CoverCard pattern={Pattern.PreviousNextButtons} />
                         <CoverCard pattern={Pattern.SplitNavigation} />

client/patterns/dropdown/Details.tsx

@@ -144,7 +144,7 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
-            <RelatedPatterns patterns={[Pattern.MegaMenu, Pattern.Menu]} />
+            <RelatedPatterns patterns={[Pattern.MegaMenu, Pattern.Menu, Pattern.NestedDropdowns]} />
         </DetailsLayout>
     );
 };

client/patterns/mega-menu/Details.tsx

@@ -145,7 +145,7 @@ const Details: React.FC<{}> = () => {
                 />
             </div>
 
-            <RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
+            <RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu, Pattern.NestedDropdowns]} />
         </DetailsLayout>
     );
 };

client/patterns/menu/Details.tsx

@@ -199,7 +199,13 @@ const Details: React.FC<{}> = () => {
                 />
             </div>
             <RelatedPatterns
-                patterns={[Pattern.DotLeader, Pattern.MegaMenu, Pattern.PropertyList, Pattern.SplitNavigation]}
+                patterns={[
+                    Pattern.DotLeader,
+                    Pattern.MegaMenu,
+                    Pattern.NestedDropdowns,
+                    Pattern.PropertyList,
+                    Pattern.SplitNavigation,
+                ]}
             />
         </DetailsLayout>
     );

client/patterns/nested-dropdowns/Cover.tsx

@@ -0,0 +1,81 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import 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 rgba(0, 0, 0, 0.3)',
+                        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 rgba(0, 0, 0, 0.3)',
+                                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;

client/patterns/nested-dropdowns/Details.tsx

@@ -0,0 +1,155 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+import './nested-dropdowns.css';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Nested dropdowns">
+            <Helmet>
+                <meta name="description" content="Create nested dropdown menu with CSS" />
+                <meta name="keywords" content="css dropdown menu, css multi-level dropdown menu, css nested dropdown menu" />
+            </Helmet>
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    Hover on the Patterns &rarr; Navigation to see the sub dropdowns.
+                </div>
+                <BrowserFrame
+                    content={(
+                        <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>
+                    )}
+                    source={`
+<style>
+/* The root */
+.p-nested-dropdowns {
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    display: flex;
+
+    /* Reset list styles */
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.p-nested-dropdowns li {
+    /* Spacing */
+    padding: 8px;
+
+    /* Used to position the sub dropdown */
+    position: relative;
+}
+
+/* The sub dropdown */
+.p-nested-dropdowns ul {
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+
+    /* 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 */
+.p-nested-dropdowns ul ul {
+    left: 100%;
+    position: absolute;
+    top: 0;
+}
+
+/* Change background color of list item when being hovered */
+.p-nested-dropdowns li:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Show the direct sub dropdown when hovering the list item */
+.p-nested-dropdowns li:hover > ul {
+    display: block;
+}
+</style>
+
+<ul className="p-nested-dropdowns">
+    <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>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/nested-dropdowns/nested-dropdowns.css

@@ -0,0 +1,43 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-nested-dropdowns {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    display: flex;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.p-nested-dropdowns li {
+    padding: 8px;
+    position: relative;
+}
+
+.p-nested-dropdowns ul {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    display: none;
+    left: 0;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    top: 100%;
+    width: 200px;
+}
+
+.p-nested-dropdowns ul ul {
+    left: 100%;
+    position: absolute;
+    top: 0;
+}
+
+.p-nested-dropdowns li:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.p-nested-dropdowns li:hover > ul {
+    display: block;
+}

public/sitemap.xml

@@ -39,6 +39,7 @@
     <url><loc>https://csslayout.io/patterns/mega-menu</loc></url>
     <url><loc>https://csslayout.io/patterns/menu</loc></url>
     <url><loc>https://csslayout.io/patterns/modal</loc></url>
+    <url><loc>https://csslayout.io/patterns/nested-dropdowns</loc></url>
     <url><loc>https://csslayout.io/patterns/notification</loc></url>
     <url><loc>https://csslayout.io/patterns/overlay-play-button</loc></url>
     <url><loc>https://csslayout.io/patterns/pagination</loc></url>