Mega Menu Dropdown

<!--
  Author: @yokkcode
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<nav class="mega-nav">
  <div class="mega-nav__item">
    <span class="mega-nav__trigger">Products ▾</span>
    <div class="mega-nav__panel">
      <div class="mega-nav__col">
        <h5>Design</h5>
        <a href="#">Prototyping</a>
        <a href="#">Whiteboards</a>
      </div>
      <div class="mega-nav__col">
        <h5>Develop</h5>
        <a href="#">API Tools</a>
        <a href="#">CLI</a>
      </div>
      <div class="mega-nav__col">
        <h5>Manage</h5>
        <a href="#">Analytics</a>
        <a href="#">Billing</a>
      </div>
    </div>
  </div>
</nav>

/*
 * Author: @yokkcode
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.mega-nav {
  font-family: system-ui, sans-serif;
}
.mega-nav__item {
  position: relative;
}
.mega-nav__trigger {
  display: inline-block;
  padding: 12px 4px;
  color: #e5e5ea;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mega-nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  display: flex;
  gap: 32px;
  padding: 22px 26px;
  border-radius: 14px;
  background: #17171f;
  border: 1px solid #292933;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mega-nav__item:hover .mega-nav__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mega-nav__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 120px;
}
.mega-nav__col h5 {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b6b76;
}
.mega-nav__col a {
  color: #cfcfd6;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s ease;
}
.mega-nav__col a:hover {
  color: #f59e0b;
}