feat: Dropdown

contents/_includes/covers/dropdown.njk

@@ -0,0 +1,9 @@
+<div class="dropdown">
+    <div class="dropdown__trigger">
+        {% rectangle %}
+        {% triangle "b" %}
+    </div>
+    <div class="dropdown__content">
+        <div class="dropdown__body">{% lines "hor", 5 %}</div>
+    </div>
+</div>

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
+<div class="dropdown">
+    <!-- The trigger element -->
+    <div class="dropdown__trigger">
+        ...
+    </div>
+
+    <!-- The content -->
+    <div class="dropdown__content">
+        ...
+    </div>
+</div>
+```
+
+## 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 %}

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 %}