remove symbol on my menu and add hover

[Andres12333]

good afternoon i'm struggle to find a solution for this problem

i would like to hover my menu when i go with the mouse for example donna i will open the menu down i found this code:

<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>

 but i doesnt work properly if you see in my website https://vigg8q-91.myshopify.com/

when i want to go to a submenu my menu will close (not so user friendly 🙂 )

and the second question if is possibile to remove this: (the down arrow)

thx in advance for all

[Andres12333]

hallo thank you for your reply

seems that there is something broken with the theme i added here the css:

but nothing change and also i added the other code in header.liquid

but nothing change

i added the code after the end of schema (end file)

[Andres12333]

yes i'm open to that