feat(dropdowns): Dropdowns inside nav

css/pico.classless.css

@@ -1808,7 +1808,7 @@ canvas {
 details {
   display: block;
   margin-bottom: var(--spacing);
-  padding-bottom: calc(var(--spacing));
+  padding-bottom: var(--spacing);
   border-bottom: var(--border-width) solid var(--accordion-border-color);
 }
 details summary {
@@ -1831,12 +1831,12 @@ details summary::-moz-list-bullet {
 }
 details summary::after {
   display: block;
-  width: 1rem;
+  width: 1.5rem;
   height: 1rem;
   float: right;
   transform: rotate(-90deg);
   background-image: var(--icon-chevron);
-  background-position: center;
+  background-position: right;
   background-size: 1rem auto;
   background-repeat: no-repeat;
   content: "";
@@ -1871,6 +1871,7 @@ details[open] > summary::after {
 }
 [dir=rtl] details summary::after {
   float: left;
+  background-position: left;
 }
 
 /**
@@ -2103,45 +2104,30 @@ details[role=list] {
 details[role=list] summary {
   margin: 0;
 }
-details[role=list] summary:not([role=button]) {
-  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
-  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
-  border: var(--border-width) solid var(--form-element-border-color);
-  border-radius: var(--border-radius);
-  background-color: var(--form-element-background-color);
-  color: var(--form-element-placeholder-color);
-  line-height: inherit;
-  cursor: pointer;
-  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
-}
-details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
-  border-color: var(--form-element-active-border-color);
-  background-color: var(--form-element-active-background-color);
-}
-details[role=list] summary:not([role=button]):focus {
-  box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
-}
-details[role=list] summary:not([role=button])::after {
-  height: 100%;
-}
 details[role=list] summary + ul {
+  display: flex;
   z-index: 99;
   position: absolute;
   top: auto;
   right: 0;
   left: 0;
+  flex-direction: column;
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
   margin: 0;
   padding: 0;
   border: var(--border-width) solid var(--dropdown-border-color);
-  border-top: none;
   border-radius: var(--border-radius);
   border-top-right-radius: 0;
   border-top-left-radius: 0;
   background-color: var(--dropdown-background-color);
   box-shadow: var(--card-box-shadow);
   color: var(--dropdown-color);
+  white-space: nowrap;
 }
 details[role=list] summary + ul li {
+  width: 100%;
   margin-bottom: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
   list-style: none;
@@ -2163,6 +2149,7 @@ details[role=list] summary + ul li a:hover {
   background-color: var(--dropdown-hover-background-color);
 }
 details[role=list] summary::after {
+  height: calc(1rem * var(--line-height));
   transform: rotate(0deg);
 }
 details[role=list][disabled] summary, details[role=list].disabled summary {
@@ -2188,6 +2175,57 @@ details[role=list][open] summary::before {
   cursor: default;
 }
 
+*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]) {
+  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+  border: var(--border-width) solid var(--form-element-border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--form-element-background-color);
+  color: var(--form-element-placeholder-color);
+  line-height: inherit;
+  cursor: pointer;
+  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
+}
+*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):active, *:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
+  border-color: var(--form-element-active-border-color);
+  background-color: var(--form-element-active-background-color);
+}
+*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
+  box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
+}
+
+nav ul li details[role=list] {
+  display: inline-block;
+  margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
+}
+nav ul li details[role=list] summary:not([role=button]) {
+  padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
+  border-radius: var(--border-radius);
+  line-height: var(--line-height);
+}
+nav ul li details[role=list] summary:not([role=button]):focus {
+  background-color: var(--primary-focus);
+}
+nav ul li details[role=list] summary:not([role=button]) a {
+  pointer-events: none;
+}
+nav ul li details[role=list] summary:not([role=button]) a:focus {
+  background-color: transparent;
+}
+nav ul li details[role=list][open] summary {
+  border-radius: var(--border-radius);
+}
+nav ul li details[role=list][open] summary + ul {
+  margin-top: calc(var(--nav-link-spacing-horizontal) * 0.5);
+  border-radius: var(--border-radius);
+}
+nav ul li details[role=list][open] summary + ul a {
+  border-radius: 0;
+}
+nav ul li details[role=list][open] summary[role=button] + ul {
+  margin-top: var(--nav-link-spacing-horizontal);
+}
+
 /**
  * Loading ([aria-busy=true])
  */

css/pico.css

@@ -2006,7 +2006,7 @@ canvas {
 details {
   display: block;
   margin-bottom: var(--spacing);
-  padding-bottom: calc(var(--spacing));
+  padding-bottom: var(--spacing);
   border-bottom: var(--border-width) solid var(--accordion-border-color);
 }
 details summary {
@@ -2029,12 +2029,12 @@ details summary::-moz-list-bullet {
 }
 details summary::after {
   display: block;
-  width: 1rem;
+  width: 1.5rem;
   height: 1rem;
   float: right;
   transform: rotate(-90deg);
   background-image: var(--icon-chevron);
-  background-position: center;
+  background-position: right;
   background-size: 1rem auto;
   background-repeat: no-repeat;
   content: "";
@@ -2072,6 +2072,7 @@ details[open] > summary::after {
 }
 [dir=rtl] details summary::after {
   float: left;
+  background-position: left;
 }
 
 /**
@@ -2400,45 +2401,30 @@ details[role=list] {
 details[role=list] summary {
   margin: 0;
 }
-details[role=list] summary:not([role=button]) {
-  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
-  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
-  border: var(--border-width) solid var(--form-element-border-color);
-  border-radius: var(--border-radius);
-  background-color: var(--form-element-background-color);
-  color: var(--form-element-placeholder-color);
-  line-height: inherit;
-  cursor: pointer;
-  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
-}
-details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
-  border-color: var(--form-element-active-border-color);
-  background-color: var(--form-element-active-background-color);
-}
-details[role=list] summary:not([role=button]):focus {
-  box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
-}
-details[role=list] summary:not([role=button])::after {
-  height: 100%;
-}
 details[role=list] summary + ul {
+  display: flex;
   z-index: 99;
   position: absolute;
   top: auto;
   right: 0;
   left: 0;
+  flex-direction: column;
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
   margin: 0;
   padding: 0;
   border: var(--border-width) solid var(--dropdown-border-color);
-  border-top: none;
   border-radius: var(--border-radius);
   border-top-right-radius: 0;
   border-top-left-radius: 0;
   background-color: var(--dropdown-background-color);
   box-shadow: var(--card-box-shadow);
   color: var(--dropdown-color);
+  white-space: nowrap;
 }
 details[role=list] summary + ul li {
+  width: 100%;
   margin-bottom: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
   list-style: none;
@@ -2460,6 +2446,7 @@ details[role=list] summary + ul li a:hover {
   background-color: var(--dropdown-hover-background-color);
 }
 details[role=list] summary::after {
+  height: calc(1rem * var(--line-height));
   transform: rotate(0deg);
 }
 details[role=list][disabled] summary, details[role=list].disabled summary {
@@ -2485,6 +2472,57 @@ details[role=list][open] summary::before {
   cursor: default;
 }
 
+*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]) {
+  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+  border: var(--border-width) solid var(--form-element-border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--form-element-background-color);
+  color: var(--form-element-placeholder-color);
+  line-height: inherit;
+  cursor: pointer;
+  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
+}
+*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):active, *:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
+  border-color: var(--form-element-active-border-color);
+  background-color: var(--form-element-active-background-color);
+}
+*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
+  box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
+}
+
+nav ul li details[role=list] {
+  display: inline-block;
+  margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
+}
+nav ul li details[role=list] summary:not([role=button]) {
+  padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
+  border-radius: var(--border-radius);
+  line-height: var(--line-height);
+}
+nav ul li details[role=list] summary:not([role=button]):focus {
+  background-color: var(--primary-focus);
+}
+nav ul li details[role=list] summary:not([role=button]) a {
+  pointer-events: none;
+}
+nav ul li details[role=list] summary:not([role=button]) a:focus {
+  background-color: transparent;
+}
+nav ul li details[role=list][open] summary {
+  border-radius: var(--border-radius);
+}
+nav ul li details[role=list][open] summary + ul {
+  margin-top: calc(var(--nav-link-spacing-horizontal) * 0.5);
+  border-radius: var(--border-radius);
+}
+nav ul li details[role=list][open] summary + ul a {
+  border-radius: 0;
+}
+nav ul li details[role=list][open] summary[role=button] + ul {
+  margin-top: var(--nav-link-spacing-horizontal);
+}
+
 /**
  * Loading ([aria-busy=true])
  */

css/pico.fluid.classless.css

@@ -1778,7 +1778,7 @@ canvas {
 details {
   display: block;
   margin-bottom: var(--spacing);
-  padding-bottom: calc(var(--spacing));
+  padding-bottom: var(--spacing);
   border-bottom: var(--border-width) solid var(--accordion-border-color);
 }
 details summary {
@@ -1801,12 +1801,12 @@ details summary::-moz-list-bullet {
 }
 details summary::after {
   display: block;
-  width: 1rem;
+  width: 1.5rem;
   height: 1rem;
   float: right;
   transform: rotate(-90deg);
   background-image: var(--icon-chevron);
-  background-position: center;
+  background-position: right;
   background-size: 1rem auto;
   background-repeat: no-repeat;
   content: "";
@@ -1841,6 +1841,7 @@ details[open] > summary::after {
 }
 [dir=rtl] details summary::after {
   float: left;
+  background-position: left;
 }
 
 /**
@@ -2073,45 +2074,30 @@ details[role=list] {
 details[role=list] summary {
   margin: 0;
 }
-details[role=list] summary:not([role=button]) {
-  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
-  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
-  border: var(--border-width) solid var(--form-element-border-color);
-  border-radius: var(--border-radius);
-  background-color: var(--form-element-background-color);
-  color: var(--form-element-placeholder-color);
-  line-height: inherit;
-  cursor: pointer;
-  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
-}
-details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
-  border-color: var(--form-element-active-border-color);
-  background-color: var(--form-element-active-background-color);
-}
-details[role=list] summary:not([role=button]):focus {
-  box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
-}
-details[role=list] summary:not([role=button])::after {
-  height: 100%;
-}
 details[role=list] summary + ul {
+  display: flex;
   z-index: 99;
   position: absolute;
   top: auto;
   right: 0;
   left: 0;
+  flex-direction: column;
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
   margin: 0;
   padding: 0;
   border: var(--border-width) solid var(--dropdown-border-color);
-  border-top: none;
   border-radius: var(--border-radius);
   border-top-right-radius: 0;
   border-top-left-radius: 0;
   background-color: var(--dropdown-background-color);
   box-shadow: var(--card-box-shadow);
   color: var(--dropdown-color);
+  white-space: nowrap;
 }
 details[role=list] summary + ul li {
+  width: 100%;
   margin-bottom: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
   list-style: none;
@@ -2133,6 +2119,7 @@ details[role=list] summary + ul li a:hover {
   background-color: var(--dropdown-hover-background-color);
 }
 details[role=list] summary::after {
+  height: calc(1rem * var(--line-height));
   transform: rotate(0deg);
 }
 details[role=list][disabled] summary, details[role=list].disabled summary {
@@ -2158,6 +2145,57 @@ details[role=list][open] summary::before {
   cursor: default;
 }
 
+*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]) {
+  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+  border: var(--border-width) solid var(--form-element-border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--form-element-background-color);
+  color: var(--form-element-placeholder-color);
+  line-height: inherit;
+  cursor: pointer;
+  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
+}
+*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):active, *:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
+  border-color: var(--form-element-active-border-color);
+  background-color: var(--form-element-active-background-color);
+}
+*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
+  box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
+}
+
+nav ul li details[role=list] {
+  display: inline-block;
+  margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
+}
+nav ul li details[role=list] summary:not([role=button]) {
+  padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
+  border-radius: var(--border-radius);
+  line-height: var(--line-height);
+}
+nav ul li details[role=list] summary:not([role=button]):focus {
+  background-color: var(--primary-focus);
+}
+nav ul li details[role=list] summary:not([role=button]) a {
+  pointer-events: none;
+}
+nav ul li details[role=list] summary:not([role=button]) a:focus {
+  background-color: transparent;
+}
+nav ul li details[role=list][open] summary {
+  border-radius: var(--border-radius);
+}
+nav ul li details[role=list][open] summary + ul {
+  margin-top: calc(var(--nav-link-spacing-horizontal) * 0.5);
+  border-radius: var(--border-radius);
+}
+nav ul li details[role=list][open] summary + ul a {
+  border-radius: 0;
+}
+nav ul li details[role=list][open] summary[role=button] + ul {
+  margin-top: var(--nav-link-spacing-horizontal);
+}
+
 /**
  * Loading ([aria-busy=true])
  */

docs/src/dropdowns.html

@@ -21,18 +21,21 @@
             <h2>Dropdown menus and custom selects without JavaScript.</h2>
           </hgroup>
           <p>Dropdowns are built with <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code> as a wrapper and <code>&lt;<b>summary</b>&gt;</code> and <code>&lt;<b>ul</b>&gt;</code> as direct childs.</p>
-          <p>For style consistency with the form elements, dropdowns are styled like a <a href="forms.html"><code>&lt;<b>select</b>&gt;</code></a> by default.</p>
+          <p>For style consistency with the form elements, dropdowns are styled like a <a href="forms.html">&lt;select&gt;</a> by default.</p>
-          <article aria-label="Dropdown style">
+          <article aria-label="Dropdowns as Selects">
-            <details role="list">
+            <details role="list">x
               <summary aria-haspopup="listbox">Dropdown</summary>
               <ul role="listbox">
-                <li><a href="#">Mauris vehicula velit</a></li>
+                <li><a href="#">Action</a></li>
-                <li><a href="#">Nunc dignissim sapien</a></li>
+                <li><a href="#">Another action</a></li>
-                <li><a href="#">Aenean egestas quam</a></li>
+                <li><a href="#">Something else here</a></li>
               </ul>
             </details>
             <select required>
               <option value="" disabled selected>Select</option>
+              <option>Option</option>
+              <option>Another option</option>
+              <option>Something else here</option>
             </select>
             <footer class="code">
 
@@ -40,9 +43,9 @@
 &lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
   &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
   &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
-    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Mauris vehicula velit&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
-    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Nunc dignissim sapien&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
-    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Aenean egestas quam&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
   &lt;/<b>ul</b>&gt;
 &lt;/<b>details</b>&gt;
 
@@ -56,29 +59,29 @@
             </footer> 
           </article>
           <p><code><i>role</i>=<u>"button"</u></code> on the <code>&lt;<b>summary</b>&gt;</code> element can be used to turn the dropdown into a button.</p>
-          <article aria-label="Dropdown style">
+          <article aria-label="Dropdowns as Buttons">
             <details role="list">
               <summary aria-haspopup="listbox" role="button">Dropdown as a button 1</summary>
               <ul role="listbox">
-                <li><a href="#">Mauris vehicula velit</a></li>
+                <li><a href="#">Action</a></li>
-                <li><a href="#">Nunc dignissim sapien</a></li>
+                <li><a href="#">Another action</a></li>
-                <li><a href="#">Aenean egestas quam</a></li>
+                <li><a href="#">Something else here</a></li>
               </ul>
             </details>
             <details role="list">
               <summary aria-haspopup="listbox" role="button" class="secondary">Dropdown as a button 2</summary>
               <ul role="listbox">
-                <li><a href="#">Mauris vehicula velit</a></li>
+                <li><a href="#">Action</a></li>
-                <li><a href="#">Nunc dignissim sapien</a></li>
+                <li><a href="#">Another action</a></li>
-                <li><a href="#">Aenean egestas quam</a></li>
+                <li><a href="#">Something else here</a></li>
               </ul>
             </details>
             <details role="list">
               <summary aria-haspopup="listbox" role="button" class="contrast">Dropdown as a button 3</summary>
               <ul role="listbox">
-                <li><a href="#">Mauris vehicula velit</a></li>
+                <li><a href="#">Action</a></li>
-                <li><a href="#">Nunc dignissim sapien</a></li>
+                <li><a href="#">Another action</a></li>
-                <li><a href="#">Aenean egestas quam</a></li>
+                <li><a href="#">Something else here</a></li>
               </ul>
             </details>
             <footer class="code">
@@ -89,7 +92,9 @@
     Dropdown as a button 1
   &lt;/<b>summary</b>&gt;
   &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
-    <em>…</em>
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
   &lt;/<b>ul</b>&gt;
 &lt;/<b>details</b>&gt;
 
@@ -99,7 +104,9 @@
     Dropdown as a button 2
   &lt;/<b>summary</b>&gt;
   &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
-    <em>…</em>
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
   &lt;/<b>ul</b>&gt;
 &lt;/<b>details</b>&gt;
 
@@ -109,7 +116,9 @@
     Dropdown as a button 3
   &lt;/<b>summary</b>&gt;
   &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
-    <em>…</em>
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
   &lt;/<b>ul</b>&gt;
 &lt;/<b>details</b>&gt;
 </code></pre>
@@ -117,7 +126,7 @@
             </footer> 
           </article>
           <p>Dropdowns can be used as custom selects with <code>&lt;<b>input</b> <i>type</i>=<u>"radio"</u>&gt;</code> or  <code>&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;</code></p>
-          <article aria-label="Dropdown style">
+          <article aria-label="Dropdowns with radio buttons or checkboxes">
             <details role="list">
               <summary aria-haspopup="listbox">Select single element</summary>
               <ul role="listbox">
@@ -218,6 +227,52 @@
               
             </footer> 
           </article>
+          <p>Dropdowns can be used inside the <a href="navs.html">&lt;nav&gt;</a> component.</p>
+          <article aria-label="Dropdowns inside a nav">
+            <nav>
+              <ul>
+                <li><strong>Brand</strong></li>
+              </ul>
+              <ul>
+                <li><a href="#" onclick="event.preventDefault()">Link</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Link</a></li>
+                <li>
+                  <details role="list" dir="rtl">
+                    <summary aria-haspopup="listbox">Dropdown</summary>
+                    <ul role="listbox">
+                      <li><a href="#">Action</a></li>
+                      <li><a href="#">Another action</a></li>
+                      <li><a href="#">Something else here</a></li>
+                    </ul>
+                  </details>
+                </li>
+              </ul>
+            </nav>
+            <footer class="code">
+
+<pre><code>&lt;<b>nav</b>&gt;
+  &lt;<b>ul</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
+  &lt;/<b>ul</b>&gt;
+  &lt;<b>ul</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;
+      &lt;<b>details</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>&gt;
+        &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
+        &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
+          &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+          &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+          &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+        &lt;/<b>ul</b>&gt;
+      &lt;/<b>details</b>&gt;
+    &lt;/<b>li</b>&gt;
+  &lt;/<b>ul</b>&gt;
+&lt;/<b>nav</b>&gt;</code></pre>
+
+            </footer> 
+          </article>
+          <p>ℹ️&nbsp;Dropdowns inside a <code>&lt;<b>nav</b>&gt;</code> are still experimental and will probably evolve.</p>
         </section>
 
         ${require('./_footer.html')}

docs/src/rtl.html

@@ -27,7 +27,7 @@
   <em>...</em>
 &lt;/<b>html</b>&gt;</code></pre>
 
-          <p>The RTL feature is still experimental and will probably evolve.</p>
+          <p>ℹ️&nbsp;The RTL feature is still experimental and will probably evolve.</p>
         </section>
 
         ${require('./_footer.html')}

scss/components/_dropdown.scss

@@ -6,63 +6,31 @@ details[role="list"] {
   summary {
     margin: 0;
 
-    &:not([role="button"]) {
-      height: calc(
-        1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
-          var(--border-width) * 2
-      );
-      padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
-      border: var(--border-width) solid var(--form-element-border-color);
-      border-radius: var(--border-radius);
-      background-color: var(--form-element-background-color);
-      color: var(--form-element-placeholder-color);
-      line-height: inherit;
-      cursor: pointer;
-
-      @if $enable-transitions {
-        transition: background-color var(--transition),
-          border-color var(--transition), color var(--transition),
-          box-shadow var(--transition);
-      }
-
-      // Active & Focus
-      &:active,
-      &:focus {
-        border-color: var(--form-element-active-border-color);
-        background-color: var(--form-element-active-background-color);
-      }
-
-      // Focus
-      &:focus {
-        box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
-      }
-
-      // Marker
-      &::after {
-        height: 100%;
-      }
-    }
-
     & + ul {
+      display: flex;
       z-index: 99;
       position: absolute;
       top: auto;
       right: 0;
       left: 0;
+      flex-direction: column;
+      min-width: fit-content;
       margin: 0;
       padding: 0;
       border: var(--border-width) solid var(--dropdown-border-color);
-      border-top: none;
       border-radius: var(--border-radius);
       border-top-right-radius: 0;
       border-top-left-radius: 0;
       background-color: var(--dropdown-background-color);
       box-shadow: var(--card-box-shadow);
       color: var(--dropdown-color);
+      white-space: nowrap;
 
       li {
+        width: 100%;
         margin-bottom: 0;
-        padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
+        padding: calc(var(--form-element-spacing-vertical) * 0.5)
+          var(--form-element-spacing-horizontal);
         list-style: none;
 
         &:first-of-type {
@@ -75,8 +43,10 @@ details[role="list"] {
 
         a {
           display: block;
-          margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
+          margin: calc(var(--form-element-spacing-vertical) * -0.5)
-          padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
+            calc(var(--form-element-spacing-horizontal) * -1);
+          padding: calc(var(--form-element-spacing-vertical) * 0.5)
+            var(--form-element-spacing-horizontal);
           color: var(--dropdown-color);
           text-decoration: none;
 
@@ -85,10 +55,11 @@ details[role="list"] {
           }
         }
       }
-      
     }
 
+    // Marker
     &::after {
+      height: calc(1rem * var(--line-height));
       transform: rotate(0deg);
     }
   }
@@ -113,8 +84,93 @@ details[role="list"] {
       bottom: 0;
       left: 0;
       background: transparent;
-      content: '';
+      content: "";
       cursor: default;
     }
   }
 }
+
+// <summary> as a <select>
+*:not(nav > ul > li):not(nav > aside > ul > li) {
+  > details[role="list"] {
+    summary {
+      &:not([role="button"]) {
+        height: calc(
+          1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
+            var(--border-width) * 2
+        );
+        padding: var(--form-element-spacing-vertical)
+          var(--form-element-spacing-horizontal);
+        border: var(--border-width) solid var(--form-element-border-color);
+        border-radius: var(--border-radius);
+        background-color: var(--form-element-background-color);
+        color: var(--form-element-placeholder-color);
+        line-height: inherit;
+        cursor: pointer;
+
+        @if $enable-transitions {
+          transition: background-color var(--transition),
+            border-color var(--transition), color var(--transition),
+            box-shadow var(--transition);
+        }
+
+        &:active,
+        &:focus {
+          border-color: var(--form-element-active-border-color);
+          background-color: var(--form-element-active-background-color);
+        }
+
+        &:focus {
+          box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
+        }
+      }
+    }
+  }
+}
+
+// Dropdown inside <nav>
+nav ul li {
+  details[role="list"] {
+    display: inline-block;
+    margin: calc(var(--nav-link-spacing-vertical) * -1)
+      calc(var(--nav-link-spacing-horizontal) * -1);
+
+    summary:not([role="button"]) {
+      padding: var(--nav-link-spacing-vertical)
+        var(--nav-link-spacing-horizontal);
+      border-radius: var(--border-radius);
+      line-height: var(--line-height);
+
+      &:focus {
+        background-color: var(--primary-focus);
+      }
+
+      a {
+        pointer-events: none;
+
+        &:focus {
+          background-color: transparent;
+        }
+      }
+    }
+
+    &[open] summary {
+      border-radius: var(--border-radius);
+
+      & + ul {
+        margin-top: calc(var(--nav-link-spacing-horizontal) * 0.5);
+        border-radius: var(--border-radius);
+
+        a {
+          border-radius: 0;
+        }
+      }
+
+      &[role="button"] {
+        & + ul {
+          margin-top: var(--nav-link-spacing-horizontal);
+        }
+      }
+    }
+  }
+}

scss/components/_modal.scss

@@ -58,7 +58,7 @@ dialog {
     > footer {
       text-align: right;
 
-      [role='button'] {
+      [role="button"] {
         margin-bottom: 0;
 
         &:not(:first-of-type) {
@@ -104,7 +104,7 @@ dialog {
 
   // Closed state
   &:not([open]),
-  &[open='false'] {
+  &[open="false"] {
     display: none;
   }
 }

scss/utilities/_loading.scss

@@ -18,7 +18,7 @@
     border: 0.1875em solid currentColor;
     border-radius: 1em;
     border-right-color: transparent;
-    content: '';
+    content: "";
     vertical-align: text-bottom;
     vertical-align: -.125em; // Visual alignment
     animation: spinner 0.75s linear infinite;

scss/utilities/_tooltip.scss

@@ -44,7 +44,7 @@
     border-left: .3rem solid transparent;
     border-radius: 0;
     background-color: transparent;
-    content: '';
+    content: "";
     color: var(--tooltip-background-color);
   }