Enable Dropdown Menu on Hover for Dawn Theme Heade

[Tadoori_Group]

Dawn Theme - How to get drop down menu list on hover instead of click?

[CodingFifty · Accepted solution]

Hi @Tadoori_Group,

Go to Online Store, then Theme, and select Edit Code.
Search for header.liquid file Add the provided code at the end of the file.

<script>
  let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
let dropdownItems = document.querySelector(".header__submenu");
items.forEach(item => {
  item.addEventListener("mouseenter", () => {
    item.setAttribute("open", true);
    let ulElement = item.querySelector("ul");
    if (ulElement !== null) {
      ulElement.addEventListener("mouseleave", () => {
        item.removeAttribute("open");
      });
    }
  });
  item.addEventListener("focus", () => {
    item.setAttribute("open", true);
  });
  item.addEventListener("blur", () => {
    item.removeAttribute("open");
  });
  item.addEventListener("mouseenter", () => {
      item.setAttribute("open", "");
    });
    item.addEventListener("mouseleave", () => {
      item.removeAttribute("open");
    });
});
if (dropdownItems !== null) {
  dropdownItems.addEventListener("mouseleave", () => {
    items.forEach(item => {
      item.removeAttribute("open");
    });
  });
}
</script>

[Tadoori_Group]

Thanks! It worked!!
However, I want those underlines to be removed. Help with the code please.

[kai23]

When trying to apply it I get this message 

• Invalid JSON in tag 'schema'

What can I do to fix this?