I have just come across a weird CSS quirk that goes far beyond my understanding and would appreciate some help:
I was trying to build a fancy pure css dropdown solution using the clickable event method Ryan Collins proposed: http://www.ryancollins.me/?p=1041
With :active and :hover and some nested divs we may make trigger spans (or divs or whatever) that cause a sister element in the same container to appear upon mouse click. The example on Ryans page worked on my ipad so I assumed that iOS was smart enough to handle a touch event as triggering the :active state - and if the trigger contains a hyperlink this works, but there is no way to deactivate the active state of a hyperlink, safe for clicking on another hyperlink.
This sucks, because my plan to have an elegant navigation (and some other stuff) pop up and hide from view with just css is foiled, the menu never collapses - but then why does the example on Ryan's page work? I did some testing and finally narrowed the key element down to a twitter widget he has embedded on his page. Some javascript styles the embedded tweet and in doing so, it affects the very :active and : hover solution that all of a sudden works via touch on iOS, even without hyperlinks.
Can anybody tell me what causes this behavior and if I could emulate it without relying on a crazy hack like embedding a twitter widget and hiding it from view?