<ul class="__menu">
  <li class="__menu_item">
    <button type="button" class="__menu_button">Category</button>
    <ul class="__menu_sub category">
      <li><a href="#">Alpha</a></li>
      <li><a href="#">Beta</a></li>
      <li><a href="#">Gamma</a></li>
      <li><a href="#">Delta</a></li>
      <li><a href="#">Epsilon</a></li>
      <li><a href="#">Zeta</a></li>
      <li><a href="#">Eta</a></li>
      <li><a href="#">Theta</a></li>
      <li><a href="#">Iota</a></li>
      <li><a href="#">Kappa</a></li>
      <li><a href="#">Lambda</a></li>
      <li><a href="#">Mu</a></li>
      <li><a href="#">Nu</a></li>
      <li><a href="#">Xi</a></li>
      <li><a href="#">Omicron</a></li>
      <li><a href="#">Pi</a></li>
      <li><a href="#">Rho</a></li>
      <li><a href="#">Sigma</a></li>
      <li><a href="#">Tau</a></li>
      <li><a href="#">Upsilon</a></li>
      <li><a href="#">Phi</a></li>
      <li><a href="#">Chi</a></li>
      <li><a href="#">Psi</a></li>
      <li><a href="#">Omega</a></li>
    </ul>
  </li>
  <li class="__menu_item">
    <button type="button" class="__menu_button">Tag</button>
    <ul class="__menu_sub tag">
      <li><a href="#">Alpha</a></li>
      <li><a href="#">Beta</a></li>
      <li><a href="#">Gamma</a></li>
      <li><a href="#">Delta</a></li>
      <li><a href="#">Epsilon</a></li>
      <li><a href="#">Zeta</a></li>
      <li><a href="#">Eta</a></li>
      <li><a href="#">Theta</a></li>
      <li><a href="#">Iota</a></li>
      <li><a href="#">Kappa</a></li>
      <li><a href="#">Lambda</a></li>
      <li><a href="#">Mu</a></li>
      <li><a href="#">Nu</a></li>
      <li><a href="#">Xi</a></li>
      <li><a href="#">Omicron</a></li>
      <li><a href="#">Pi</a></li>
      <li><a href="#">Rho</a></li>
      <li><a href="#">Sigma</a></li>
      <li><a href="#">Tau</a></li>
      <li><a href="#">Upsilon</a></li>
      <li><a href="#">Phi</a></li>
      <li><a href="#">Chi</a></li>
      <li><a href="#">Psi</a></li>
      <li><a href="#">Omega</a></li>
    </ul>
  </li>
</ul>

html {
  background:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%) 50% 0 / 16px 16px,
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%) calc(50% + 8px) -8px / 16px 16px,
    linear-gradient(-45deg, #e0e0e0 25%, transparent 25%) 50% 8px / 16px 16px,
    linear-gradient(-45deg, transparent 75%, #e0e0e0 75%) calc(50% - 8px) 0 / 16px 16px;
}
.__menu {
  --pos: #fff;
  --neg: #202020;
  background: var(--neg);
    color: var(--pos);
  border-radius: 0.25em;
  box-sizing: border-box;
  display: flex;
    gap: 0 2em;
  inline-size: max-content;
    max-inline-size: 100%;
  list-style: none;
  margin-inline: auto;
  padding-block: 1px;
  padding-inline: 2em;
  position: relative;
}
.__menu_button {
  background: transparent;
    color: inherit;
  border: none;
  cursor: pointer;
  display: block;
  font: inherit;
  font-weight: bolder;
  padding-block: 1em;
  padding-inline: 2em;
  position: relative;
  z-index: 2;
}
.__menu_button:hover {
  background: color-mix(in srgb, currentcolor 12.5%, transparent);
}
.__menu_sub {
  background: var(--pos);
    color: var(--neg);
  border: solid 1px;
  border-radius: 0.25em;
  list-style: none;
  overflow: hidden;
  padding: 2em;
  position: absolute;
    inset-block: calc(100% - 0.5em) auto;
    inset-inline: 0;
  z-index: 1;
}
.__menu_sub.category > li {
  border-block: solid 1px
    color-mix(in srgb, currentcolor 25%, transparent);
}
.__menu_sub.category > * + li {
  border-block-start: none;
}
.__menu_sub.category a {
  display: block;
  padding-block: 1em;
}
.__menu_sub.tag {
  display: flex;
  flex-flow: wrap;
  gap: 1em;
  justify-content: center;
}
.__menu_sub.tag a::before {
  content: "#";
}
.__menu_item:focus-within > .__menu_button {
  background: #fff;
    color: #202020;
}
.__menu_item:not(:focus-within) > .__menu_sub {
  clip-path: inset(50%);
  block-size: 1px;
  border: none;
  padding: 0;
}