• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 385
  • Last Modified:

CSS - Safari

See attached; note the pulldown menus under workorder.

The dropdowns under Workorder DO NOT appear on an iPad in Safari.

It works fine in IE, Firefox & Chrome on a PC, Win 7.

Richard Korts
Richard Korts
  • 3
1 Solution
Kim WalkerWeb Programmer/TechnicianCommented:
That's because there's no way to hover on a touch screen. You'll need to use javascript to simulate hover/blur when the menu is tapped. For example, add a class selector to line 24 such as:
ul.drop li:hover > ul, ul.drop li.hover > ul { visibility: visible }

Open in new window

Add a javascript function to your script element such as:
function toggleHover(el) {
	el.className = (el.className.indexOf('hover') > -1) ? '' : 'hover';

Open in new window

And add a click event to the list item such as:
<li onClick="javascript: toggleHover(this);">Work Orders

Open in new window

Kim WalkerWeb Programmer/TechnicianCommented:
I just discovered a better solution. It seems the click event triggers the hover pseudo state anyway, but on the iPad, the click event is distracted by the copy/paste function where if you hold your finger on the item, it will select the text for copy/paste. You can prevent this distraction by adding an empty click event to your list item. Do not change the css on line 24 nor add the javascript. Simply add the empty click event:
<li onClick="">Work Orders

Open in new window

Richard KortsAuthor Commented:
To xmediaman

I added what you said firsr; it works on the iPad & on Firefox; I didn't test the other browsers yet.

So you are saying just add onClick = "" to links with pulldowns (& skip the rest)?

Kim WalkerWeb Programmer/TechnicianCommented:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now