See fiddle here: http://jsfiddle.net/3xLZu/7/
Got a nice little CSS3/HTML5 hover menu going here... and from what I've tested, it works fine on my Windows PC in recent IE/Firefox/Chrome/Opera builds... and on Safari in my iPad2 Mini. Seems to be OK on cruddy Azpen Android tablet, AFAIK. (Still feel free to critique/optimize it though, fairly new to HTML5/CSS3.)
Still, I have a curiosity regarding the behavior in iOS/Safari... first some of the code snippets that I think are most relevant (but the grand bulk is in the fiddle):
<li><a href="#">Foo</a> </li> <!-- anchor allows click/hover states -->
<li><a href="#">Bar</a>
<ul>
<li><a href="#">Bar 1</a>
</li>
<li><a href="#">Bar 2</a>
</li>
<li><a href="#">Bar 3</a>
</li>
<li><a href="#">Bar 4</a>
</li>
</ul>
</li>
<li>Qux</li> <!-- won't react to hover/click on iOS -->
And the bit of CSS that lets the submenus display:
/* on hover, color background */
nav li:hover
{
color: white;
background: rgba(123,255,0,.35);
}
nav li li { display: none; } /* suppress sublist entities*/
nav li:hover li { display: block; } /* until main list hovered over */
Now to my problems/questions...
Is there a better work-around (less hack-y) way to implement hover state to work on iOS, without forcing anchors on all list items? I only noticed the issue when I had opted to remove links from the main menu list...
The other matter is regarding the hover state "sticking." Is there a way to unclick/unhover in my CSS so that the menus don't stay up indefinitely? It's OK for the menus to be up if you want to click a submenu item, but if you want to zoom out, click away, browse eleswhere, the submenus stay active, displayed, and hide any content directly below it.
Preferably, I would like to keep the page/content with just CSS/HTML. Thank you.
