CSS Menu not working on iPad / iPhone - ios

Question

I have just built my first responsive website but there is one issue I am facing, the CSS dropdown menus work on android and Chrome's emulation but not in safari on iPhones or iPads. Here is a link to a working copy and here is the code:
HTML
<nav role="navigation" id="top-nav" class="floatRight">
<div class="nav top-nav cf">
<ul>
<li class="page_item page-item-25 current_page_item">Home</li>
<li class="page_item page-item-35">Contact Us Now</li>
<li class="page_item page-item-37">Services</li>
<li class="page_item page-item-41">Gallery</li>
</ul>
</div>
</nav>
CSS
#top-nav {
margin-top: 60px;
z-index:200;
}
#top-nav li {
float: left;
background-image: none;
padding-left: 0;
}
#top-nav li a {
font-size: 14px;
padding: 8px 12px;
color: #797f94;
display: block;
}
#top-nav li:hover {
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #2AA6FF),
color-stop(1, #1E8AD7)
);
background-image: -o-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -moz-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -webkit-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -ms-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: linear-gradient(to bottom, #2AA6FF 0%, #1E8AD7 100%);
border-radius: 5px;
}
#top-nav li:hover a {
color: #ffffff;
text-decoration: none;
}
/* ==========================================================================
Tablet changes
========================================================================== */
#media screen and (min-width: 640px) and (max-width: 1024px) {
#top-nav {
width: 70px;
border-radius: 3px;
position: absolute;
right: 20px;
z-index: 300;
}
#top-nav::before {
content: "Menu";
}
#top-nav ul {
width: 100%;
}
#top-nav::before:hover div, #top-nav::before:focus div, #top-nav:hover div, #top-nav:focus div {
z-index: 400;
display: block;
}
#top-nav li {
background-image: none;
position: relative;
}
#top-nav li:hover {
background-image: none;
}
}
/* ==========================================================================
Tablet & mobile changes
========================================================================== */
#media screen and (max-width: 1024px) {
#top-nav {
padding: 8px 12px;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #2AA6FF),
color-stop(1, #1E8AD7)
);
background-image: -o-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -moz-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -webkit-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -ms-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: linear-gradient(to bottom, #2AA6FF 0%, #1E8AD7 100%);
}
#top-nav li a {
color: #ffffff;
}
#top-nav::before {
color: #ffffff;
background-image: url(../images/menu.gif);
background-position: 0% 3px;
background-repeat: no-repeat;
padding-left: 29px;
}
#top-nav li:hover a {
color: #ffffff;
text-decoration: underline;
}
#top-nav div {
display: none;
}
#top-nav:hover div {
/*position: absolute;*/
}
#top-nav:hover {
height: 210px;
}
}
/* ==========================================================================
Mobile changes
========================================================================== */
#media screen and (max-width: 639px) {
#top-nav {
margin-top: 0;
overflow: hidden;
float: none;
}
#top-nav::before {
content: "J Gibson Electrical";
font-family: segoe-script, "Comic Sans MS", cursive, sans-serif;
font-weight: bold;
}
#top-nav ul {
width: 100%;
}
#top-nav li {
clear: left;
}
#top-nav:hover div {
display: block;
}
#top-nav li:hover, #top-nav li:focus {
background-image: none;
}
}
Solution
As the accepted answer says, JavaScript was the solution. Here was my solution:
//This goes in an onload or onresize event
if(viewportWidth <= 1024)
$("#top-nav").click( function() {
toggleMenu();
});
}
function toggleMenu()
{
menuItems = $("#top-nav div");
if(menuItems.css("display") == "none")
{
menuItems.css({
"display": "block"
});
}
else
{
menuItems.css({
"display": "none"
});
$("#top-nav").css({
"height": "auto"
});
}
}

Answer 1

The issue is with the fact that you can't "hover" on an iPad, you have to use js onclick events and styling to make them drop down on click. Here are some links that might help https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent http://www.w3schools.com/jsref/prop_style_width.asp
I was having the same issue and I decided to use a slide menu http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

Answer 2

hover states don't work on touch enabled devices. You'll have to use touch events in js or just a regular click event.

Answer 3

Hello Phill you need to use other pseudo selector
Check the following stackoverflow post :touch CSS pseudo-class or something similar?
Seb

Answer 4

Found a different issue related to this topic that I thought I would post for future reference.
ISSUE > Dropdown's work in all browsers except Safari Mobile.
Tracked the issue to the A tag not having a href element. This appears to only be an issue on Safari mobile. Without the href tag the element is not treated as a clickable element.
Cheers!