Dropdown / sous-menu

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

.bn-dropdown {
  --bn-dropdown-accent: #E6E4DD;

  display: flex;
  gap: 2.25rem;

  padding: 1.25rem 2.5rem;
  font-family: 'Inter', sans-serif;
  background: #0B0F10;
}

.bn-dropdown__link {
  color: #C7C1B7;
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bn-dropdown__link.is-active,
.bn-dropdown__link:hover {
  color: var(--bn-dropdown-accent);
}

.bn-dropdown__item {
  position: relative;
}

/* Caché par défaut. ":hover" sur le parent .bn-dropdown__item est
   ce qui déclenche l'apparition — pas besoin d'une seule ligne de JS */
.bn-dropdown__menu {
  position: absolute;
  top: calc(100% + 1rem);
  left: 0;

  min-width: 220px;
  padding: 0.75rem;

  background: #050808;
  border: 1px solid rgba(230, 228, 221, 0.1);
  border-radius: 6px;

  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.bn-dropdown__item:hover .bn-dropdown__menu,
.bn-dropdown__item:focus-within .bn-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bn-dropdown__menu-link {
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  color: #C7C1B7;
  text-decoration: none;
  font-size: 0.82rem;
}

.bn-dropdown__menu-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--bn-dropdown-accent);
}

.bn-dropdown__menu-link--all {
  color: var(--bn-dropdown-accent);
  font-weight: 600;
  border-bottom: 1px solid rgba(230, 228, 221, 0.1);
  border-radius: 0;
  margin-bottom: 0.25rem;
  padding-bottom: 0.75rem;
}

</style>

<nav class="bn-dropdown" data-fx-root>
  <a href="#" class="bn-dropdown__link">À propos</a>

  <div class="bn-dropdown__item">
    <a href="#" class="bn-dropdown__link is-active">Projets ⌄</a>

    <div class="bn-dropdown__menu">
      <a href="#" class="bn-dropdown__menu-link bn-dropdown__menu-link--all">
        Tous les projets →
      </a>
      <a href="#" class="bn-dropdown__menu-link">Entre ombre et silence</a>
      <a href="#" class="bn-dropdown__menu-link">Horizons perdus</a>
      <a href="#" class="bn-dropdown__menu-link">Signal</a>
    </div>
  </div>

  <a href="#" class="bn-dropdown__link">Réflexions</a>
  <a href="#" class="bn-dropdown__link">Contact</a>
</nav>