CodePen Embed - JS_17_tailwind_메뉴구현

<script src="https://cdn.tailwindcss.com"></script>

<nav class="menu-box-1 flex justify-center font-bold">
  <ul class="bg-[#afafaf] px-[20px] rounded-[10px] flex">
    <li class="group relative">
      <a href="#" class="block p-[10px_20px] hover:text-[white] hover:bg-[black] whitespace-nowrap">1차 메뉴 아이템</a>
      <ul class="hidden group-hover:block absolute top-[100%] left-[0] bg-[#afafaf] w-full">
        <li><a href="#" class="text-center block py-[10px] hover:text-[white] hover:bg-[black]">2차 메뉴 아이템</a></li>
        <li><a href="#" class="text-center block py-[10px] hover:text-[white] hover:bg-[black]">2차 메뉴 아이템</a></li>
        <li><a href="#" class="text-center block py-[10px] hover:text-[white] hover:bg-[black]">2차 메뉴 아이템</a></li>
      </ul>
    </li>
    <li class="group relative">
      <a href="#" class="block p-[10px_20px] hover:text-[white] hover:bg-[black] whitespace-nowrap">1차 메뉴 아이템</a>
      <ul class="hidden group-hover:block absolute top-[100%] left-[0] bg-[#afafaf] w-full">
        <li><a href="#" class="text-center block py-[10px] hover:text-[white] hover:bg-[black]">2차 메뉴 아이템</a></li>
        <li><a href="#" class="text-center block py-[10px] hover:text-[white] hover:bg-[black]">2차 메뉴 아이템</a></li>
        <li><a href="#" class="text-center block py-[10px] hover:text-[white] hover:bg-[black]">2차 메뉴 아이템</a></li>
      </ul>
    </li>
    <li class="group relative">
      <a href="#" class="block p-[10px_20px] hover:text-[white] hover:bg-[black] whitespace-nowrap">1차 메뉴 아이템</a>
      <ul class="hidden group-hover:block absolute top-[100%] left-[0] bg-[#afafaf] w-full">
        <li><a href="#" class="text-center block py-[10px] hover:text-[white] hover:bg-[black]">2차 메뉴 아이템</a></li>
        <li><a href="#" class="text-center block py-[10px] hover:text-[white] hover:bg-[black]">2차 메뉴 아이템</a></li>
        <li><a href="#" class="text-center block py-[10px] hover:text-[white] hover:bg-[black]">2차 메뉴 아이템</a></li>
      </ul>
    </li>
  </ul>
</nav>

@font-face {
  font-family: "GmarketSansMedium";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

/* 커스텀 */
html > body {
  font-family: "GmarketSansMedium";
  text-underline-position: under;
}

This Pen is owned by calixlock on CodePen.

See more by @calixlock on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.