Testing dropdown patch to pico.css

by ethanpil

HTML

<div class="container">

  <h3>Nav with Dropdown under Phones</h3>
  <nav>
    <ul>
      <li><a href="#">Computers</a></li>
      <li><a href="#">Tablets</a></li>
      <li>
        <a href="#">Phones</a>
        <ul>
          <li><a href="#">Apple</a></li>
          <li><a href="#">Samsung</a></li>
          <li><a href="#">Google</a></li>
          <li><a href="#">Sony</a></li>
        </ul>
      </li>
      <li><a href="#">Accessories</a></li>
    </ul>
  </nav>

  <hr>


  <h3>Aside Nav with Dropdown under Phones</h3>
  <aside>
    <nav>
      <ul>
        <li><a href="#">Computers</a></li>
        <li><a href="#">Tablets</a></li>
        <li>
          <a href="#">Phones</a>
          <ul>
            <li><a href="#">Apple</a></li>
            <li><a href="#">Samsung</a></li>
            <li><a href="#">Google</a></li>
            <li><a href="#">Sony</a></li>
          </ul>
        </li>
        <li><a href="#">Accessories</a></li>
      </ul>
    </nav>
  </aside>
</div>

CSS

/*!
 * Pico.css v1.4.3 (https://picocss.com)
 * Copyright 2019-2021 - Licensed under MIT
 */
/**
 * Theme: default
 */
:root {
  --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
    "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --line-height: 1.5;
  --font-weight: 400;
  --font-size: 16px;
  --border-radius: 0.25rem;
  --border-width: 1px;
  --outline-width: 3px;
  --spacing: 1rem;
  --typography-spacing-vertical: 1.5rem;
  --block-spacing-vertical: calc(var(--spacing) * 2);
  --block-spacing-horizontal: var(--spacing);
  --grid-spacing-vertical: 0;
  --grid-spacing-horizontal: var(--spacing);
  --form-element-spacing-vertical: 0.75rem;
  --form-element-spacing-horizontal: 1rem;
  --form-label-font-weight: var(--font-weight);
  --transition: 0.2s ease-in-out;
}
@media (min-width: 576px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 768px) {
  :root {
    --font-size: 18px;
  }
}
@media (min-width: 992px) {
  :root {
    --font-size: 19px;
  }
}
@media (min-width: 1200px) {
  :root {
    --font-size: 20px;
  }
}

@media (min-width: 576px) {
  body > header,
body > main,
body > footer,
section {
    --block-spacing-vertical: calc(var(--spacing) * 2.5);
  }
}
@media (min-width: 768px) {
  body > header,
body > main,
body > footer,
section {
    --block-spacing-vertical: calc(var(--spacing) * 3);
  }
}
@media (min-width: 992px) {
  body > header,
body > main,
body > footer,
section {
    --block-spacing-vertical: calc(var(--spacing) * 3.5);
  }
}
@media (min-width: 1200px) {
  body > header,
body > main,
body > footer,
section {
    --block-spacing-vertical: calc(var(--spacing) * 4);
  }
}

@media (min-width: 576px) {
  article {
    --block-spacing-horizontal: calc(var(--spacing) * 1.25);
  }
}
@media (min-width: 768px) {
  article {
    --block-spacing-horizontal: calc(var(--spacing) * 1.5);
  }
}
@media (min-width: 992px) {
  article {
   ...