Make the menu only remain open when the mouse is over it

[ArnauP]

How can you make it so that the menu is only kept open when the mouse is over it, but when you leave the menu square that opens, it closes?

https://jaccomcollection.com/

Thanks you!

[BSSCommerce-B2B · Accepted solution]

@ArnauP , 

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid

Step 3: Add this code before </body> tag

<style>
 header-menu [open] summary:after {
  content: "";
  position: absolute;
  height: 2em;
  top: 3em;
  left: -2em;
  right: -2em;
 }
</style>
<script>
  let items = document.querySelectorAll(".header__inline-menu details");
  items.forEach(item => {
    item.addEventListener("mouseover", () => {
      item.setAttribute("open", true);
      item.querySelector("ul").addEventListener("mouseleave", () => {
        item.removeAttribute("open");
      });
    item.addEventListener("mouseleave", () => {
      item.removeAttribute("open");
    });
  });
  });
</script>

Hope it helps 😍

[ArnauP]

That's Exactly what i need, thanks BSSCommerce.

[BSSCommerce-B2B]

You're welcome! 😊