These days, the majority of online traffic comes from mobile devices. This makes web developers build sites that are mobile first oriented. 

When building a new store, one of the things developers struggle with the most is site navigation. Previously, most sites used a structure of divs that were showing and hiding depending on hover states. Because browsers and devices triggered things differently, it was always a challenge to have the navigation drop downs “show” and “hide” depending on the user’s actions.

Considering the continuous interest in creating a great mobile friendly experience, some developers might choose to go another path and use “details” HTML items instead of using a div items structure. 

Keep in mind that this would work great on tablet devices for example, but what happens if you open a nav built with details if you open the site on a desktop device? You’ll probably find yourself in the situation where you hover a navigation button and expect it to open on hover but nothing happens until you click it. This is not too user friendly because people are used to having menus automatically open the dropdown panels when they are hovered. Why is there one more click needed? It may seem excessive, but this is how the details HTML items work. They need a click for them to open. 

What can you do if you have a Shopify store for example, you bought a theme and when you test it you see that the navigation dropdowns don’t open until you click them because they are details items?

The good news is that you can get to this result but for this you need some Javascript. You might think about this the quick and easy way: on mouseover event for the details button, just set for it the open attribute using

document.getElementById("myDetails").open = true;

And on mouseout remove the attribute with 

document.getElementById("myDetails").open = false;

When testing this functionality, you might find that when you move the mouse down out of the button that opened the dropdown, the dropdown hides too and you can't click any buttons in the dropdown because they don’t show anymore. You should keep in mind that you are above the same details item considering that you just moved down and the dropdown content was part of the same details item. 

This situation probably appears because the dropdown content has the position absolute set so that you can show it as you like on the page. Considering that the position should remain set to absolute, what is the path to go? 

The answer is that you should not remove the open attribute when you go out the button. What you could do is to add some delay and after some milliseconds you can check if the mouse is above the dropdown content, and if it is, you don’t remove the attribute “open” anymore from the details item. What you need to add more, is a delay when going out the dropdown content. 

After some milliseconds you should check if the mouse is again above the details button, and if yes, do nothing. If when you check the mouse position it doesn’t hover the button or the details content, you should remove the “open” attribute and the dropdown closes.

There, you solved one small disadvantage of using the details HTML item.