CSS:hover for touchscreen reverse engineering

Question

I've found this site which has a sub-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.

Answer 1

我的学校网站（www.harveygs.kent.sch.uk）遇到了同样的问题，但Servicepoint网站给了我答案 - 只需添加“<a href='#'>（您的菜单标题）</a>”在菜单中的第一个<ul>之后。

Answer 2

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

Answer 3

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.