CSS:hover for touchscreen reverse engineering

I've found this site which has a s开发者_Python百科ub-menu that works fine on my iPhone/Pad and I’m curious how they made the li:hover ul{ work for a touch screen?

I've looked through the entire HTML, CSS, JS and nothing stands out so if someone cluey can have a peak I’d be very interested in what they find.

I had the same problem with my school website (www.harveygs.kent.sch.uk) but the Servicepoint site gave me the answer - simply add "<a href='#'>(your menu header)</a>" after the first <ul> in your menus.

You can't make :hover work on a mobile device. The menu is showing on click events AND hover events. I'm not certain how this site is doing the click events, but you can either do it with JavaScript or with the a:active CSS selector

If it's an element that can gain focus, then the hover CSS should work ok on a touch screen - those "menu" items are also links, so they react to the hover event when they gain focus by being touched. You should be able to do this with amy element that can similarly gain focus (I'm doing it with a link without an HREF attribute) to activate the hover event when the mouse passed over it, or the object is touched on a touchscreen.