Horizontal Navigation with Dropdowns 2

<!--
  Day 66: Horizontal Navigation with Dropdowns 2

  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 2 -->
<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 flex-col items-center text-sm sm:flex-row">
      <!-- Home -->
      <li>
        <a
          href="javascript:void(0)"
          class="block rounded-xl border border-transparent px-3 py-2 font-semibold text-zinc-800 hover:border-zinc-200 hover:bg-white"
        >
          Home
        </a>
      </li>
      <!-- END Home -->

      <!-- Products -->
      <li
        class="group [&>div]:focus relative [&:focus-within>button]:relative [&:focus-within>button]:z-20 [&:focus-within>button]:border-zinc-200 [&:focus-within>button]:bg-white [&: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-t-xl border-x border-t border-transparent px-3 py-2 font-semibold text-zinc-800 group-hover:relative group-hover:z-20 group-hover:border-zinc-200 group-hover:bg-white"
          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-px w-48 rounded-tr-xl rounded-b-xl border border-zinc-200 bg-white opacity-0 shadow-lg"
        >
          <ul class="py-2">
            <li>
              <a
                href="javascript:void(0)"
                class="block px-3 py-2 text-zinc-700 hover:bg-zinc-100"
              >
                RankMaster Pro
              </a>
            </li>
            <li>
              <a
                href="javascript:void(0)"
                class="block px-3 py-2 text-zinc-700 hover:bg-zinc-100"
              >
                SEO Optimizer Plus
              </a>
            </li>
            <li>
              <a
                href="javascript:void(0)"
                class="block px-3 py-2 text-zinc-700 hover:bg-zinc-100"
              >
                Keyword Genius
              </a>
            </li>
            <li>
              <a
                href="javascript:void(0)"
                class="block px-3 py-2 text-zinc-700 hover:bg-zinc-100"
              >
                Backlink Builder Elite
              </a>
            </li>
          </ul>
        </div>
      </li>
      <!-- END Products -->

      <!-- Services -->
      <li
        class="group [&>div]:focus relative [&:focus-within>button]:relative [&:focus-within>button]:z-20 [&:focus-within>button]:border-zinc-200 [&:focus-within>button]:bg-white [&: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-t-xl border-x border-t border-transparent px-3 py-2 font-semibold text-zinc-800 group-hover:relative group-hover:z-20 group-hover:border-zinc-200 group-hover:bg-white"
          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-px w-48 rounded-tr-xl rounded-b-xl border border-zinc-200 bg-white opacity-0 shadow-lg"
        >
          <ul class="py-2">
            <li>
              <a
                href="javascript:void(0)"
                class="block px-3 py-2 text-zinc-700 hover:bg-zinc-100"
              >
                Web Design
              </a>
            </li>
            <li>
              <a
                href="javascript:void(0)"
                class="block px-3 py-2 text-zinc-700 hover:bg-zinc-100"
              >
                Web Development
              </a>
            </li>
            <li>
              <a
                href="javascript:void(0)"
                class="block px-3 py-2 text-zinc-700 hover:bg-zinc-100"
              >
                UI/UX Design
              </a>
            </li>
            <li>
              <a
                href="javascript:void(0)"
                class="block px-3 py-2 text-zinc-700 hover:bg-zinc-100"
              >
                SEO Optimization
              </a>
            </li>
          </ul>
        </div>
      </li>
      <!-- END Services -->

      <!-- Contact -->
      <li>
        <a
          href="javascript:void(0)"
          class="block rounded-xl border border-transparent px-3 py-2 font-semibold text-zinc-800 hover:border-zinc-200 hover:bg-white"
        >
          Contact
        </a>
      </li>
      <!-- END Contact -->

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