Normally on a touchscreen device a CSS :hover or Javascript OnMouseOver event is triggered by a touch, allowing the use of pure CSS or Javascript-based drop menu navigation. On IE10 in Windows 8 (or windows mobile) this isn't the case, so none of my navigation is touch friendly on those devices at the moment. With a bluetooth mouse connected everything works fine when hovering, but when using a touch as soon as I let go of the screen the drop menu disappears. I'm having the same problem with both pure css and Javascript-based nav that uses hover. Also tried adding active and click events, but he result is the same, as soon as you let your finger off of the area that triggers the drop menu it disappears and is unable to continue. Does anyone have a workaround for this?
I think this could be a possible fix to the problem you are having: http://stackoverflow.com/questions/16032448/ie10-css-hover-not-working-with-touch-devices
For me this workaround did the job. But you need jquery: jQuery(yourHoverElement).click(function(){ // check if the hidden element is visible onclick. It will be visible on non mobile browsers. Replace the selector with one that fits your needs. if(! jQuery(jQuery(this).find('ul')[0]).is(':visible')){ // if it is not visible onclick, show it jQuery(this).find('ul').show(); } });