Question

I have this navigation bar on my website and it doesn’t drop down on my iPod touch, I suspect the same for iPhones and iPads.
This is one of the pages

I was wondering if there is any quick fix to enable the touch/hover.

CSS

Answer 1

If you are interested in iDevices, then you can use this trick:

#nav ul {
display: none;
/* Your styles */
}
#nav > li:hover ul {
display: block;
}
/* This is important */
#nav > li > a:hover {
color: #fff; /* You can set the same color or add other style.*/
}

If an element has the :hover event then the first tap iOS renders :hover and the second tap raises the click event.

That should work.

P.S. It’s better to make different UI logic for mobile, touch and desktop.