I would like to make my parents menu which “Products” was clickable however when I click for my parents navigation it will only shown the drop down. Have been tried to insert for this code from this page Solved: Parents Menu clickable however it not worked for me. Can someone help/advise the best way could click parents menu and when pointed to parents menu it will shown drop down. Thanks in advance!
.header__inline-menu details[open]>.header__submenu {
z-index: 3 !important
}
To avoid make parents menu clickable but not show the child drop down I also add hover for drop down.
<script>
let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
console.log(items)
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>
