CSS Mega Menu - weird behaviour on touch screen PCs
I have a Menu on this site that is behaving normally on chrome on a standard Windows 8.1 PC but has odd issues when viewed on chrome on a Windows 8.1 laptop with a touchscreen.
The submenu items aren't clickable and when you lose focus there is a weird ghosting of the text. Not seen this before and not quite sure what is causing it.. I am using Foundation 4, the site is built on Orchard.
Any advice would be appreciated!
To replicate the issue open Google Chrome developer tools and enable "Emulate touch screen".
Now click on a top level menu item (eg. Council) and hover outside the menu. We can see the menu background sub-menu headings are visible. Hover back over 'Council' and you'll see the last level of menu items become visible.
The reason why this is happening is becuase when you click on 'Council' it's adding the CSS class 'hover' to the its li element. Within that li there is a ul with the class 'dropdown'. A CSS rule is executing which sets this to visible if the class 'hover' is applied to the parent li.
Looking at the foundation documentation http://foundation.zurb.com/docs/v/4.3.2/components/top-bar.html the same functionality is occuring here. THE DIFFERENCE is that when clicking outside the menu the 'hover' class is removed from elements in the menu. This is not happening with your solution.
Could be related to..
Otherwise you could create some dirty jQuery to monitor when you click outside the menu and remove the .hover class from all elements within the menu.
Hope that helps.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here