Are hover dropdown menus still unaccessible for mobile user?

[deeper]

Hi,
often menues have a submenu expanding via hover. Many CMS offer this kind of dropdown menues.

Is it still impossible for mobile user to get access to a submenu, because mobile devices still don't know how to handle or at least compensate "a:hover"?

Applying all link states, including a:focus and a:active, is no sufficient help?

[Dymero]

I have a hover submenu on a site I work on. I was worried about this for the transition to mobile, but at least on Android it functions as if it were a click-to-open submenu. I actually use embedded lists for this purpose. I can't say how it'd function if I were using the anchor tag.

[deeper]

To be honest, I don't use a mobile device myself, but I'd like to find a solution without JavaScript, which supports at least all important mobile devices.
I have Wordpress, which has a decent menue system, and my site has only one small submenu. Therefore IMHO in this case a submenu expanding via hover is not worse than via click.

With the help of Google recently I've found a lot of information about link states active/hover/focus and if they help mobile user to deal with hover dropdowns. Unfortunately there are three different opinions:

-Using hover+focus+active is enough; in worst case your submenu won't close on some devices, but basically your mobile user will be happy and other solutions have their small flaws too.
-You even don't need to implement all three link states (just "tap and double tap"), but this won't work properly on some devices.
-Especially regarding hover dropdown menues there is only one good solution for your mobile users: JavaSript.

Thanks Dymero, may be others want share their experiences too.

[diddly]

just recently i found out that both iphone and windows phones still don't react to ":hover" events, i.e. do not translate taps into hover events, so my dropdown menu wouldn't work.
instead of adding hacks for apple & microsoft, i decided to replace the hover event with a checkbox and style it to look like a menu button.
it works on my android phone, but i don't know about iphone and windows phone yet, as i have no way of testing for those, other than asking friends & colleagues.

anyhow, here's the html:

<input id="menu-icon" type="checkbox"/>
<label for="menu-icon">
<div id="navbar-linklist">
 <ul>
 <li class="active"><a href="http://xxx.xxx/test.html">Hauptseite</a></li>
 <li class=""><a href="http://xxx.xxx/test1.html">40-Jahres-Feier</a></li>
 <li class=""><a href="http://xxx.xxx/team">Team</a></li>
 <li class=""><a href="http://xxx.xxx/angebot">Angebot</a></li>
 <li class=""><a href="http://xxx.xxx/anmeldung">Anmeldung</a></li>
 <li class=""><a href="http://xxx.xxx/geschichte">Geschichte</a></li>
 <li class=""><a href="http://xxx.xxx/termine">Termine</a></li>
 <li class=""><a href="http://xxx.xxx/themen">Jahresthemen</a></li>
 <li class=""><a href="http://xxx.xxx/praktika">Praktika</a></li>
 <li class=""><a href="http://xxx.xxx/alben">Fotoalbum</a></li>
 <li class=""><a href="http://xxx.xxx/links">Links</a></li>
 <li class=""><a href="http://xxx.xxx/karten">Karten</a></li>
 </ul>
</div>
</label>

and here's the css:

/* only used for mobile devices */

input[type=checkbox] {
 display: none; 
}
input[type=checkbox] + label { display:inline-block;
 width: 50px;
 height: 50px;
 background: url(../img/menu-hand.png) no-repeat center;
}
#menu-icon + label #navbar-linklist {
 display:none;
 position: absolute;
 background: #BC0000;
 border: 5px solid #BC3838;
 left: 0;
 top: 50px;
 z-index: 999;
 list-style: none;
 width: 100%;
}
#menu-icon:checked + label {
 background-color: #bc3838;
}
#menu-icon:checked + label #navbar-linklist {
 display: inline-block;
}
#navbar-linklist li { 
 padding: 0; 
 border: none;
 width: 100%;
}
#navbar-linklist li.active > a { color: #F7F4E6; cursor: default; }
#navbar-linklist li.active:hover { cursor: default; }

#navbar-linklist li a:hover { color: #F7F4E6;
 background-color: #BC3838;
}
#navbar-linklist li a { color: #222222;
 display: block;
 padding: 0.5em;
 width: 100%;
}

[edited by: not2easy at 3:27 pm (utc) on Apr 18, 2015]
[edit reason] Charter Compliance [/edit]