CSS Drop down menu on mobile. how to get around :hover

Question

I've had a search and I couldn't find anything & also it's my first time using the site so hope it hasn't been asked.

I've run into a situation. I'm by no means an experienced website maker. I'm learning as I go. I have a CSS drop down menu that works fine on desktop browsers. When I get into the realm of mobile I encounter a problem, namely that :hoverdoesn't work (obviously).

I found this : http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly but I can't get the ruddy thing to work.

The page in question I'm applying it to is here : http://www.inkslinger.co.uk/calibre/index.html I really can't work this out and its driving me absolutely batty. Any help would be really appreciated.

Answer 1

I had the same problem and found an easy workaround which I have used here hover example

The Post Natal and Ante Natal options, when hovered over, trigger the drop down, but you may notice that they are NOT links themselves. In my original model they were links, but when I realised this would not work on touch devices, I simply made them into triggers for the drop down boxes, and put the links inside the boxes too. So for you, your 'What we do' link, would not be a link, just a trigger for the dropdown menu, and then in the menu you can have your link to the 'what we do' info.

It is also worth remembering that certain touch devices, such as some iPads, do not like hover states at all, if you find that the hover state won't trigger your dropdown menu, then add 'onclick="return true"' to the list item in question. This will usually make the hover state work like a click.

Hope this helps, what I've written represents about 3 days of poring over my library of reference books.