Horizontal Navigation with Dropdowns

<!--
  Day 50: Horizontal Navigation with Dropdowns

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Horizontal Menu with Dropdowns -->
<div
  class="relative mx-auto rounded-3xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
  <nav class="flex justify-center p-4">
    <ul class="flex gap-1.5 text-sm">
      <!-- Products -->
      <li
        class="group [&>div]:focus relative [&:focus-within>div]:visible [&:focus-within>div]:opacity-100 [&:hover>div]:visible [&:hover>div]:opacity-100"
      >
        <button
          type="button"
          class="flex items-center gap-1 rounded-xl px-3 py-1.5 font-semibold text-zinc-800 hover:bg-zinc-100"
          onclick="this.blur()"
        >
          <span>Products</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-chevron-down inline-block size-4 opacity-50"
          >
            <path
              fill-rule="evenodd"
              d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
              clip-rule="evenodd"
            />
          </svg>
        </button>
        <div
          class="invisible absolute left-0 z-10 mt-1 w-48 rounded-lg border border-zinc-200 bg-white opacity-0 shadow-lg transition-all duration-200"
        >
          <ul class="py-2">
            <li>
              <a
                href="javascript:void(0)"
                class="block px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100"
              >
                Pixel Pro Suite
              </a>
            </li>
            <li>
              <a
                href="javascript:void(0)"
                class="block px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100"
              >
                CreativeFlow CMS
              </a>
            </li>
            <li>
              <a
                href="javascript:void(0)"
                class="block px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100"
              >
                DesignFusion App
              </a>
            </li>
            <li>
              <a
                href="javascript:void(0)"
                class="block px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100"
              >
                BrandVista Platform
              </a>
            </li>
          </ul>
        </div>
      </li>
      <!-- END Products -->

      <!-- Services -->
      <li
        class="group [&>div]:focus relative [&:focus-within>div]:visible [&:focus-within>div]:opacity-100 [&:hover>div]:visible [&:hover>div]:opacity-100"
      >
        <button
          type="button"
          class="flex items-center gap-1 rounded-xl px-3 py-1.5 font-semibold text-zinc-800 hover:bg-zinc-100"
          onclick="this.blur()"
        >
          <span>Services</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-chevron-down inline-block size-4 opacity-50"
          >
            <path
              fill-rule="evenodd"
              d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
              clip-rule="evenodd"
            />
          </svg>
        </button>
        <div
          class="invisible absolute left-0 z-10 mt-1 w-48 rounded-lg border border-zinc-200 bg-white opacity-0 shadow-lg transition-all duration-200"
        >
          <ul class="py-2">
            <li>
              <a
                href="javascript:void(0)"
                class="block px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100"
              >
                Web Design
              </a>
            </li>
            <li>
              <a
                href="javascript:void(0)"
                class="block px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100"
              >
                Web Development
              </a>
            </li>
            <li>
              <a
                href="javascript:void(0)"
                class="block px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100"
              >
                UI/UX Design
              </a>
            </li>
            <li>
              <a
                href="javascript:void(0)"
                class="block px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100"
              >
                SEO Optimization
              </a>
            </li>
          </ul>
        </div>
      </li>
      <!-- END Services -->

      <!-- Pricing -->
      <li>
        <a
          href="javascript:void(0)"
          class="block rounded-xl px-3 py-1.5 font-semibold text-zinc-800 hover:bg-zinc-100"
        >
          Pricing
        </a>
      </li>
      <!-- END Pricing -->

      <!-- About -->
      <li>
        <a
          href="javascript:void(0)"
          class="block rounded-xl px-3 py-1.5 font-semibold text-zinc-800 hover:bg-zinc-100"
        >
          About
        </a>
      </li>
      <!-- END About -->
    </ul>
  </nav>
</div>
<!-- END Horizontal Menu with Dropdowns -->