<nav class="site-menu" role="navigation" aria-label="Main Navigation">

  <ul class="nav">
    <!-- 1er niveau de navigation -->
    <li id="menu-item-1" class="menu-item current-menu-item">
      <a href="home" aria-current="page">Homepage</a>
    </li>
    <li id="menu-item-2" class="menu-item menu-item-has-children">
      <a href="#">About</a>
      <!-- sous-menu -->
      <ul class="sub-menu">
        <li id="menu-item-3" class="menu-item"><a href="team">Our team</a></li>
        <li id="menu-item-4" class="menu-item"><a href="references">Company history</a></li>
        <li id="menu-item-5" class="menu-item"><a href="references">References</a></li>
      </ul>
    </li>
    <li id="menu-item-6" class="menu-item"><a href="services">Services</a></li>
    <li id="menu-item-7" class="menu-item menu-item-has-children">
      <a href="blog">Blog</a>
      <!-- sous-menu -->
      <ul class="sub-menu">
        <li id="menu-item-8" class="menu-item"><a href="category-1">Category 1</a></li>
        <li id="menu-item-9" class="menu-item"><a href="category-2">Category 2</a></li>
      </ul>
    </li>
    <li id="menu-item-10" class="menu-item"><a href="contact">Contact</a></li>
  </ul>

</nav>

/** I'm using SCSS for this demo. You can access the CSS by clicking the "View Complied CSS" button at the top right of the CSS panel **/

/* Reset, base styles and helper classes */

* {
  border: 0;
  box-sizing: border-box;
  font-family: Arial;
  margin: 0;
  padding: 0;
}

body {
  padding: 2rem;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

button {
  -webkit-appearance: button;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 100%;
  line-height: 1;
  overflow: visible;
  margin: 0;
  text-transform: none;
}

button,
a {
  &:focus,
  &:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  &:focus:not(:focus-visible) {
    outline-color: transparent;
  }
}

/* Menu styles */

.site-menu {
  background: #28223b;
  border-radius: 0.5rem;
  color: #fff;
  padding: 1.5rem 2rem;
}

ul.nav {
  display: flex;
  list-style: none;

  & > li {
    display: flex;
    align-items: center;
    margin-left: 1em;
    padding: 0.5em 0;
    position: relative;
  }
  li a,
  li button.toggle-sub-menu:first-child {
    border-radius: 0.125rem;
    color: #fff;
    padding: 0.25rem;
    text-decoration-color: transparent;
    text-underline-offset: 0.3em;
    transition: text-decoration-color 0.2s ease-in-out;
  }
}

/* Sub menu */

ul.sub-menu {
  background: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.12);
  display: none;
  list-style: none;
  padding: 0.75rem;
  position: absolute;
  left: -0.75rem;
  top: 2.5em;

  li {
    display: block;
  }
  li + li {
    margin-top: 0.75rem;
  }
  li a {
    color: #222;
    white-space: nowrap;
  }
}

ul.nav > li.menu-item-has-children:hover .sub-menu,
ul.nav > li.menu-item-has-children:focus-within .sub-menu:not(.hidden) {
  display: block;
}

ul.sub-menu.show {
  display: block;
}

/* Sub-menu toggle buttons */

button.toggle-sub-menu {
  display: flex;
  align-items: center;

  border: 0;
  color: #fff;
}

.toggle-sub-menu .icon {
  background: #fff;
  border-radius: 50%;
  height: 1.375rem;
  line-height: 1.5rem;
  margin-left: 0.5rem;
  width: 1.375rem;
}

a + button.toggle-sub-menu {
  border-radius: 50%;
  margin-left: 0.25rem;
  padding: 0;
  pointer-events: none;

  .icon {
    margin: 0;
  }
}

.toggle-sub-menu .icon {
  color: #28223b;
  text-align: center;
  transition: all ease-in-out 0.3s;
}

.toggle-sub-menu.close .icon {
  transform: rotate(180deg);
}

.toggle-sub-menu .icon:before {
  font-size: 0.875rem;
}

jQuery(document).ready(function(jQuery){

  function createExpandSubMenuButton() {
    const menuItemsWithChildren = $(".menu-item-has-children");

    menuItemsWithChildren.each(function () {

      const link = $(this).children("a"),
            linkLabel = link.text(),
            linkMenuItemID = $(this).attr("id"),
            subMenu = $(this).find(".sub-menu"),
            subMenuID = linkMenuItemID + "-sub-menu";

      $(this).addClass("has-dropdown-button");

      subMenu.attr("id", subMenuID);
      subMenu.addClass("hidden");

      // Create 'toggle-sub-menu' button
      const expandSubMenu = document.createElement("button");
      expandSubMenu.innerHTML = '<span class="sr-only">Sub-menu '  + linkLabel + '</span>';
      expandSubMenu.innerHTML += '<span class="icon fa-solid fa-angle-down" aria-hidden="true"></span>';
      expandSubMenu.className = "toggle-sub-menu";
      expandSubMenu.setAttribute('aria-expanded', false);
      expandSubMenu.setAttribute('aria-controls', subMenuID);
      link.after(expandSubMenu);   
    });
  }
  createExpandSubMenuButton();

  // When primary link is a placeholder (#), turn it into a button

  function transformEmptyNavLinksIntoButtons() {

    const emptyNavLinks = $('.site-menu .menu-item-has-children a[href="#"]');

    emptyNavLinks.each(function(){
      const link = $(this),
            linkHTML = link[0].innerHTML,
            linkLabel = link.text(),
            linkDropdown = link.siblings('.sub-menu'),
            linkMenuItemID = link.parent('.menu-item').attr('id'),
            subMenuID = linkMenuItemID + '-sub-menu',
            buttonAriaLabel = 'Sub-menu ' + linkLabel;

      // Remove the initial 'toggle-sub-menu' button
      link.siblings('.toggle-sub-menu').remove();

      // Create button
      const button = document.createElement('button');
            button.innerHTML = linkHTML + '<span class="icon fa-solid fa-angle-down" aria-hidden="true"></span>';
            button.className = 'btn toggle-sub-menu';
            button.setAttribute('aria-controls', subMenuID);
            button.setAttribute('aria-expanded', false);
            button.setAttribute('aria-label', buttonAriaLabel);

      // Replace # link with button
      link.replaceWith(button);
    });

  } transformEmptyNavLinksIntoButtons();

  // Show and hide sub-menu when 'toggle-sub-menu' and 'toggle-dropdown' buttons are 

  function toggleSubMenu(){
    const subMenuToggles = $(".menu-item-has-children .toggle-sub-menu");

    subMenuToggles.click(function(){
      const dropdown = $(this).siblings('.sub-menu');
      const parentSiblings = $(this).parents('.menu-item').siblings('.menu-item-has-children.has-dropdown-button');
      dropdown.toggleClass("show").toggleClass("hidden");

      $(this).attr('aria-expanded', $(this).attr('aria-expanded') == 'false' ? 'true' : 'false' );
      $(this).toggleClass("close");

      // Close other dropdowns
      parentSiblings.find('.sub-menu').removeClass('show').addClass('hidden');
      parentSiblings.find('.toggle-sub-menu').removeClass("close");
    });

    // Close dropdown after last link

    const firstLevelMenuLinks = $(".site-menu .nav > .menu-item").children("a, .toggle-sub-menu");

    firstLevelMenuLinks.on( "focus", function() {
      var siblingsSubMenu = $(this).parents('.menu-item').siblings('.menu-item-has-children.has-dropdown-button').find('.sub-menu');
      siblingsSubMenu.removeClass('show').addClass('hidden');
      siblingsSubMenu.siblings('.toggle-sub-menu').attr('aria-expanded','false').removeClass('close');
    });

  } toggleSubMenu();
  
});