CSS :hover behaviour on touchscreen devices
<p>I am developing a CSS framework that relies on being <strong>simple, minimal and pure CSS</strong> as much as possible. What I want is to to make certain things like dropdowns open on hover, however I am uncertain how to go about implementing this with only CSS on mobile devices. </p>

<p>Having checked <a href="https://stackoverflow.com/a/2427465/1650200">this answer</a> previously, I confirmed what I partially knew to be true: that certain mobile browsers and devices will use the <code>:hover</code> pseudo-class when clicking an element, which will allow me to open dropdowns the way I want. Others say that <code>:active</code> works as well. </p>

<p>I am using both in one rule, as well as <code>:focus</code> to cover as many environments and cases as possible, however I am not certain this will work well across many devices. So my questions are:</p>

<ul>
<li>Is there any way to make sure a hover-based dropdown component will work across devices? </li>
<li>Are there pseudo-classes or properties that I can use that might be browser-specific or something similar to make sure that most devices are covered? </li>
<li>Is there documentation about touchscreen, mobile device or mobile browser behaviour and how they handle hover events? </li>
</ul>